/* ---------- tokens ---------- */
:root {
  --bg: #ffffff; --elev: #ffffff; --ink: #000000; --ink2: #262626; --muted: #737373; --muted2: #a8a8a8;
  --line: #dbdbdb; --line-soft: #efefef; --hover: #f2f2f2; --field: #efefef; --btn2: #efefef; --btn2-h: #dbdbdb;
  --blue: #0095f6; --blue-h: #1877f2; --link: #00376b; --red: #ed4956;
  --shadow: 0 4px 12px rgba(0, 0, 0, .15);
  --ig: linear-gradient(45deg, #ffb800 0%, #ff2e6e 50%, #9d3cff 100%);
  --sans: "Helvetica Neue", Helvetica, Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mark-bg: #0a0a0a; --mark-fg: #fff;
  --s-studio: #2a78d6; --s-growth: #eb6834; --s-platform: #1baf7a; --s-owner: #eda100;
  --sbw: 244px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --elev: #262626; --ink: #f5f5f5; --ink2: #f5f5f5; --muted: #a8a8a8; --muted2: #737373;
    --line: #262626; --line-soft: #363636; --hover: #1a1a1a; --field: #262626; --btn2: #363636; --btn2-h: #262626;
    --link: #e0f1ff; --shadow: 0 4px 12px rgba(0, 0, 0, .6);
    --s-studio: #3987e5; --s-growth: #d95926; --s-platform: #199e70; --s-owner: #c98500; --s-owner: #c98500;
    --mark-bg: #fff; --mark-fg: #0a0a0a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mark-bg: #fff; --mark-fg: #0a0a0a;
  --bg: #000000; --elev: #262626; --ink: #f5f5f5; --ink2: #f5f5f5; --muted: #a8a8a8; --muted2: #737373;
  --line: #262626; --line-soft: #363636; --hover: #1a1a1a; --field: #262626; --btn2: #363636; --btn2-h: #262626;
  --link: #e0f1ff; --shadow: 0 4px 12px rgba(0, 0, 0, .6);
  --s-studio: #3987e5; --s-growth: #d95926; --s-platform: #199e70;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/18px var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(0, 149, 246, .25); }

svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
svg.i.thin { stroke-width: 1.6; }
.vb { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -2px; }
.logo-mark { width: 24px; height: 24px; display: block; flex: none; }
.wordmark { font-family: var(--sans); font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.055em; white-space: nowrap; }

.ib { display: inline-grid; place-items: center; padding: 8px; border-radius: 50%; transition: opacity .15s; }
.ib:hover { opacity: .55; }
.ib:active { opacity: .35; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 8px; font-weight: 700; font-size: 14px; white-space: nowrap; transition: background .15s; }
.btn svg.i { width: 16px; height: 16px; stroke-width: 2.6; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.blue:hover { background: var(--blue-h); }
.btn.gray { background: var(--btn2); color: var(--ink); }
.btn.gray:hover { background: var(--btn2-h); }
.btn.sm { height: 30px; padding: 0 12px; }
.btn.wide { width: 100%; height: 44px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: default; }
.lnk { color: var(--blue); font-weight: 600; font-size: 12px; }
.lnk:hover { color: var(--link); }

/* ---------- avatars & story rings ---------- */
.av { position: relative; display: grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none; background: var(--line-soft); }
.av em { position: absolute; font-style: normal; font-weight: 700; color: #fff; font-size: 40%; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av.art img { transform: scale(1.5) translateY(14%); }
.ring { display: inline-grid; place-items: center; border-radius: 50%; padding: 4px; background: var(--ig); flex: none; cursor: pointer; }
.ring > .av { box-shadow: 0 0 0 2px var(--bg); }
.ring.seen { background: var(--line); padding: 3px; }
.ring.seen > .av { box-shadow: 0 0 0 2px var(--bg); }
.ring.brand { cursor: default; }
.brand-av { background: transparent; width: 32px; height: 32px; }
.brand-av .logo-mark { width: 100%; height: 100%; }
.wav { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden; }
.wav.on { background: var(--ig); box-shadow: inset 0 0 0 2px var(--bg); outline: 2px solid var(--ink); outline-offset: -1px; }

/* ---------- media tiles (generated art or uploaded photo) ---------- */
.m { position: absolute; inset: 0; overflow: hidden; }
.m img { position: absolute; inset: 0; width: 100%; height: 100%; }
.m.art img { object-fit: contain; object-position: 50% 100%; top: 8%; height: 92%; }
.m.photo img { object-fit: cover; }
.m .prop { position: absolute; font-size: clamp(22px, 9cqw, 48px); top: 7%; right: 7%; transform: rotate(12deg); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18)); }
.m.pl .prop { right: auto; left: 7%; transform: rotate(-12deg); }
.mbox { position: relative; container-type: inline-size; overflow: hidden; background: var(--line-soft); }

/* ---------- layout: sidebar / mobile bars ---------- */
.sb { position: fixed; inset: 0 auto 0 0; width: var(--sbw); border-right: 1px solid var(--line); padding: 8px 12px 20px; display: flex; flex-direction: column; z-index: 30; background: var(--bg); }
.sb-brand { display: flex; align-items: center; height: 74px; padding: 22px 12px 0; margin-bottom: 18px; }
.sb-brand .logo-mark { display: none; }
.sb-nav, .sb-foot { display: flex; flex-direction: column; gap: 4px; }
.sb-foot { margin-top: auto; }
.sb-nav a, .sb-item { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 8px; font-size: 16px; line-height: 20px; text-align: left; width: 100%; transition: background .15s; }
.sb-nav a:hover, .sb-item:hover { background: var(--hover); }
.sb-nav a:hover svg.i, .sb-item:hover svg.i, .sb-item:hover .wav { transform: scale(1.06); }
.sb-nav svg.i, .sb-item svg.i { transition: transform .15s; }
.sb-nav a.on { font-weight: 800; }
.on > svg.i .f, [data-nav].on svg.i .f { fill: currentColor; }
[data-nav].on svg.i .k { stroke: var(--bg); fill: var(--bg); }
[data-nav].on svg.i { stroke-width: 2.4; }

.mtop, .tabbar { display: none; }
.main { margin-left: var(--sbw); min-height: 100vh; display: flex; flex-direction: column; }
.view { display: none; flex: 1; }
.view.on { display: block; }

/* ---------- footer ---------- */
.foot { padding: 36px 16px 32px; text-align: center; color: var(--muted); font-size: 12px; line-height: 16px; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-bottom: 12px; }
.foot nav a:hover { text-decoration: underline; }

/* ---------- home ---------- */
.home { display: flex; justify-content: center; gap: 64px; padding: 22px 16px 0; }
.feed { width: 100%; max-width: 630px; min-width: 0; }
.posts { max-width: 470px; margin: 0 auto; }

.stories { display: flex; gap: 14px; overflow-x: auto; padding: 8px 2px 16px; margin-bottom: 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
.stories::-webkit-scrollbar { display: none; }
.sbub { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; flex: none; scroll-snap-align: start; }
.sbub .ring { width: 66px; height: 66px; }
.sbub .av { width: 100%; height: 100%; }
.sbub .nm { font-size: 12px; line-height: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.sbub.me .ring { background: none; padding: 0; position: relative; }
.sbub.me .av { background: var(--btn2); color: var(--muted); }
.sbub.me .plus { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); }
.sbub.me .plus svg.i { width: 14px; height: 14px; stroke-width: 3; }

.post { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 16px; }
.post-h { display: flex; align-items: center; gap: 10px; padding: 0 0 12px 4px; }
.post-h .ring { width: 42px; height: 42px; }
.post-h .ring .av { width: 100%; height: 100%; }
.post-h .ring.brand { width: 42px; height: 42px; padding: 3px; background: none; }
.who { flex: 1; min-width: 0; }
.who .l1 { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.un { font-weight: 700; }
a.un:hover { color: var(--muted); }
.who .dot, .who time { color: var(--muted); }
.who .sub { font-size: 12px; line-height: 16px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-m { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; border: 1px solid var(--line); touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.post-m .badge-r { position: absolute; top: 12px; right: 12px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); z-index: 2; }
.post-m.reel img { animation: kb 9s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.burst svg.i { width: 96px; height: 96px; fill: #fff; stroke: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .3)); animation: burst .9s ease forwards; }
@keyframes burst { 0% { transform: scale(0); opacity: 0; } 15% { transform: scale(1.2); opacity: 1; } 30% { transform: scale(.95); } 45%, 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(.2) translateY(-60px); opacity: 0; } }

.acts { position: relative; display: flex; align-items: center; margin: 4px 0 0 -8px; }
.acts .sp { flex: 1; }
.like.on svg.i { fill: var(--red); stroke: var(--red); animation: pop .35s ease; }
.save.on svg.i { fill: currentColor; }
@keyframes pop { 40% { transform: scale(1.25); } }
.likes { font-weight: 700; margin-top: 2px; }
.cap { margin-top: 6px; overflow-wrap: anywhere; }
.cap .un { margin-right: 4px; }
.vc { display: inline-block; color: var(--muted); margin-top: 6px; }
.vc:hover { color: var(--ink2); }

.hstack { position: relative; flex: 1; min-height: 150px; margin: 14px 0 6px; }
.hcard { position: absolute; top: 50%; left: 50%; width: 42%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); container-type: inline-size; transition: transform .25s ease; }
.hcard:nth-child(1) { transform: translate(-108%, -46%) rotate(-9deg); }
.hcard:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.hcard:nth-child(3) { transform: translate(8%, -46%) rotate(9deg); }
.hcard .cap2 { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 8px 7px; color: #fff; font-size: 11px; font-weight: 600; line-height: 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* suggestions strip */
.sugg { border-bottom: 1px solid var(--line); padding: 4px 0 20px; margin-bottom: 16px; }
.sugg-h { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.sugg-h h2 { font-size: 16px; font-weight: 800; }
.sugg-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sugg-row::-webkit-scrollbar { display: none; }
.scard { flex: 0 0 160px; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 8px; padding: 16px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.scard .ring { width: 80px; height: 80px; }
.scard .ring .av { width: 100%; height: 100%; }
.scard .nm { font-weight: 700; margin-top: 10px; display: flex; align-items: center; gap: 4px; max-width: 100%; }
.scard .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.scard .bar { margin: 10px 0 12px; }
.scard .btn { width: 100%; }

.bar { width: 100%; height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--ig); }

/* FAQ */
.faq { padding: 8px 0 8px; }
.faq h2 { font-size: 16px; font-weight: 600; padding: 0 4px 8px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; cursor: pointer; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg.i { width: 16px; height: 16px; stroke-width: 2.4; color: var(--muted); transition: transform .2s; }
.faq details[open] summary svg.i { transform: rotate(180deg); }
.faq details p { padding: 0 4px 16px; color: var(--ink2); line-height: 20px; }

/* right rail */
.rail { width: 319px; flex: none; padding-top: 34px; display: none; }
.racc { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.racc .wav, .rrow .ring { width: 44px; height: 44px; }
.rrow .ring .av { width: 100%; height: 100%; }
.racc .wav svg.i { width: 22px; height: 22px; }
.racc .wav:not(.on) { background: var(--btn2); color: var(--muted); }
.rt { flex: 1; min-width: 0; line-height: 18px; }
.rt b { display: flex; align-items: center; gap: 4px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt span { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh { display: flex; justify-content: space-between; align-items: center; margin: 24px 4px 8px; }
.rh span { color: var(--muted); font-weight: 700; }
.rh a { font-size: 12px; font-weight: 600; }
.rh a:hover { color: var(--muted); }
.rrow { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.rrow .rt span { font-size: 12px; }

/* ---------- explore ---------- */
.ex { max-width: 975px; margin: 0 auto; padding: 24px 20px 0; }
.ex-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search { flex: 1 1 260px; height: 40px; border-radius: 8px; background: var(--field); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--muted); }
.search svg.i { width: 18px; height: 18px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips button { height: 34px; padding: 0 14px; border-radius: 8px; background: var(--btn2); font-weight: 700; white-space: nowrap; transition: background .15s; }
.chips button:hover { background: var(--btn2-h); }
.chips button.on { background: var(--ink); color: var(--bg); }
.ex-meta { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 12px; color: var(--muted); font-weight: 600; }
.xgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; container-type: inline-size; background: var(--line-soft); }
.tile.tall { grid-row: span 2; aspect-ratio: auto; }
.tile.tall.r { grid-column: 3; }
.tile.tall.l { grid-column: 1; }
.tile .m.art img { top: 4%; height: 96%; }
.tile .tbadge { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); z-index: 2; }
.tile .tbadge svg.i { width: 20px; height: 20px; }
.tile .lab { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 10px 10px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); z-index: 2; }
.tile .lab b { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: clamp(12px, 6cqw, 15px); overflow: hidden; white-space: nowrap; }
.tile .lab span { display: flex; justify-content: space-between; font-size: clamp(11px, 5cqw, 13px); opacity: .9; margin: 2px 0 6px; }
.tile .lab .bar { height: 3px; background: rgba(255, 255, 255, .3); }
.tile .ov { position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, .35); color: #fff; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; font-weight: 700; font-size: 16px; opacity: 0; transition: opacity .15s; }
.tile .ov span { display: inline-flex; align-items: center; gap: 6px; }
.tile .ov svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
@media (hover: hover) { .tile:hover .ov { opacity: 1; } }
.skel { background: linear-gradient(90deg, var(--line-soft) 0%, var(--hover) 50%, var(--line-soft) 100%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; }
.empty .ec { width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; margin: 0 auto 16px; }
.empty .ec svg.i { width: 32px; height: 32px; stroke-width: 1.6; }
.empty h2 { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.empty p { color: var(--ink2); max-width: 340px; margin: 0 auto; }
.empty .btn { margin-top: 16px; }

/* ---------- profile ---------- */
.prof { max-width: 935px; margin: 0 auto; padding: 30px 20px 0; }
.ph { display: grid; grid-template-columns: minmax(150px, 290px) 1fr; align-items: center; margin-bottom: 32px; }
.ph-av { justify-self: center; }
.ph-av .ring { width: 168px; height: 168px; padding: 7px; }
.ph-av .ring .av { width: 100%; height: 100%; box-shadow: 0 0 0 4px var(--bg); }
.ph-r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-r1 h1 { font-size: 22px; line-height: 28px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-right: 12px; }
.ph-r1 h1 .vb { width: 18px; height: 18px; }
.ph-r1 .ib { padding: 4px; }
.ph-stats { display: flex; gap: 36px; margin: 20px 0; font-size: 16px; line-height: 20px; }
.ph-stats b { font-weight: 800; }
.ph-bio { line-height: 18px; }
.ph-bio .nm { font-weight: 700; }
.ph-bio .cat { color: var(--muted); }
.ph-bio p { white-space: pre-wrap; margin-top: 2px; }
.ph-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.ph-links a, .ph-links button { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-weight: 600; }
.ph-links svg.i { width: 14px; height: 14px; stroke-width: 2.2; }
.ph-links a:hover, .ph-links button:hover { text-decoration: underline; }
.ph-btns-m, .ph-bio-m { display: none; }

.curve { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 32px; }
.curve .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.curve .row b { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.curve .row b svg.i { width: 18px; height: 18px; }
.curve .pct { font-weight: 700; font-size: 15px; }
.curve .bar { height: 8px; margin: 12px 0 10px; }
.curve .sub { color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.curve.done .pct { background: var(--ig); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hl { display: flex; gap: 32px; padding: 0 0 36px 28px; overflow-x: auto; scrollbar-width: none; }
.hl::-webkit-scrollbar { display: none; }
.hl button { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; font-size: 12px; font-weight: 600; }
.hl .hc { width: 87px; height: 87px; border-radius: 50%; border: 1px solid var(--line); padding: 3px; display: grid; place-items: center; }
.hl .hc > span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--line-soft); overflow: hidden; position: relative; }
.hl .hc svg.i { width: 30px; height: 30px; stroke-width: 1.6; }

.ptabs { border-top: 1px solid var(--line); display: flex; justify-content: center; gap: 60px; }
.ptabs button { display: flex; align-items: center; gap: 6px; height: 52px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-top: 1px solid transparent; margin-top: -1px; }
.ptabs button svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.ptabs button.on { color: var(--ink); border-top-color: var(--ink); }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pgrid .tile { aspect-ratio: 3 / 4; cursor: pointer; }
.about { max-width: 560px; margin: 8px auto 0; }
.about .arow { display: flex; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.about .arow:last-child { border-bottom: 0; }
.about .arow svg.i { color: var(--ink2); margin-top: 1px; }
.about .arow div { flex: 1; min-width: 0; }
.about .arow b { display: block; font-weight: 600; margin-bottom: 2px; }
.about .arow span { color: var(--ink2); overflow-wrap: anywhere; }
.chipline { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chipline span { padding: 3px 10px; border-radius: 999px; background: var(--btn2); font-size: 12px; font-weight: 600; text-transform: capitalize; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* ---------- create ---------- */
.cr-wrap { padding: 32px 20px 0; display: flex; justify-content: center; }
.cr { width: 100%; max-width: 560px; background: var(--elev); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: max-width .3s ease; }
.cr:not([data-step="0"]) { max-width: 920px; }
.cr-top { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; height: 44px; border-bottom: 1px solid var(--line); padding: 0 8px; }
.cr-top h1 { text-align: center; font-size: 16px; font-weight: 700; }
.cr-back { visibility: hidden; }
.cr:not([data-step="0"]) .cr-back { visibility: visible; }
.cr-next { color: var(--blue); font-weight: 600; padding: 0 8px; min-width: 48px; text-align: right; }
.cr-next:hover { color: var(--link); }
.cr-next:disabled { opacity: .35; cursor: default; }
.cr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 16px 0; }
.cr-steps li { position: relative; font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding-top: 10px; }
.cr-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--line-soft); }
.cr-steps li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cr-steps li.done::after, .cr-steps li.on::after { transform: scaleX(1); }
.cr-steps li.done { color: var(--ink2); }
.cr-steps li.on { color: var(--ink); font-weight: 800; }
.cr-body { display: grid; grid-template-columns: 1fr; }
.cr:not([data-step="0"]) .cr-body { grid-template-columns: minmax(0, 1fr) 340px; }
.cr-media { padding: 16px; min-width: 0; }
.drop { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; border-radius: 8px; cursor: pointer; overflow: hidden; background: var(--bg); border: 1px dashed transparent; transition: background .15s, border-color .15s; }
.cr[data-step="0"] .drop:not(.has) { border-color: var(--line); }
.drop.over { background: var(--hover); border-color: var(--blue) !important; }
.drop img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop.has img { display: block; }
.drop-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px; }
.drop-empty svg.i { width: 88px; height: 88px; stroke-width: 1; margin-bottom: 8px; }
.drop-empty b { font-size: 20px; line-height: 25px; font-weight: 700; }
.drop-empty > span:not(.btn) { color: var(--muted); }
.drop-empty .btn { margin-top: 12px; }
.drop.has .drop-empty { display: none; }
.drop-change { display: none; position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.drop.has .drop-change { display: block; }
.refs-wrap { margin-top: 16px; }
.cr:not([data-step="0"]) .refs-wrap { display: none; }
.refs-h { font-weight: 600; margin-bottom: 10px; }
.refs-h small, .field label small, .rows-h small { color: var(--muted); font-weight: 400; font-size: 12px; }
.refs { display: flex; gap: 8px; }
.ref { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--field); flex: none; }
.ref img { width: 100%; height: 100%; object-fit: cover; }
.ref .rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.ref .rm svg.i { width: 12px; height: 12px; stroke-width: 3; }
.ref.add { display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line); background: transparent; }
.ref.add:hover { background: var(--hover); }
.hint { color: var(--muted); font-size: 12px; line-height: 16px; margin-top: 10px; }
.hint b { color: var(--ink2); font-weight: 600; }

.cr-side { border-left: 1px solid var(--line); display: none; max-height: 75vh; overflow-y: auto; }
.cr:not([data-step="0"]) .cr-side { display: block; }
.pane { display: none; padding: 16px; }
.cr[data-step="1"] [data-pane="1"], .cr[data-step="2"] [data-pane="2"], .cr[data-step="3"] [data-pane="3"] { display: block; }
.me-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-weight: 600; }
.me-row .wav { width: 28px; height: 28px; }
.me-row .wav:not(.on) { background: var(--btn2); color: var(--muted); }
.me-row .wav svg.i { width: 16px; height: 16px; }
.field { margin-bottom: 14px; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .tick { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 10px 12px; outline: none; transition: border-color .15s; }
.field textarea { resize: vertical; min-height: 88px; line-height: 20px; }
.field input:focus, .field textarea:focus, .tick:focus-within { border-color: var(--muted2); }
.tick { display: flex; align-items: center; gap: 2px; padding: 0 12px; }
.tick span { color: var(--muted); font-weight: 600; }
.tick input { border: 0; padding: 10px 0; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.rows-h { font-weight: 600; margin: 18px 0 4px; }
.hrow { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.hrow .hic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.hrow .hic svg.i { width: 16px; height: 16px; }
.hic.x { background: #000; box-shadow: inset 0 0 0 1px #333; }
.hic.ig { background: linear-gradient(45deg, #ffd600, #ff7a00, #ff0069, #d300c5); }
.hic.tt { background: #000; box-shadow: inset 0 0 0 1px #333; }
.hrow .at { color: var(--muted); }
.hrow input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 4px 0; }
.opt { margin-bottom: 16px; }
.opt .l { font-weight: 600; margin-bottom: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills button { height: 32px; padding: 0 12px; border-radius: 8px; background: var(--btn2); font-weight: 600; font-size: 13px; text-transform: capitalize; transition: background .15s; }
.pills button:hover { background: var(--btn2-h); }
.pills button.on { background: var(--ink); color: var(--bg); }
.buyrow { display: flex; gap: 8px; align-items: center; }
.buyrow input { width: 110px; flex: none; }
.note { color: var(--muted); font-size: 12px; line-height: 17px; margin: 4px 0 12px; }
.demo { font-size: 12px; font-weight: 600; color: var(--ink2); background: var(--btn2); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.prog { margin-top: 14px; display: none; }
.prog.on { display: block; }
.prog li { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--muted); }
.prog li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.prog li.run { color: var(--ink); font-weight: 600; }
.prog li.run::before { border-color: var(--blue); border-top-color: transparent; animation: spin .8s linear infinite; }
.prog li.done { color: var(--ink2); }
.prog li.done::before { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat; border-color: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }
.err { color: var(--red); font-size: 13px; margin-top: 10px; }
.err:empty { display: none; }
.pvc { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.pvc .ring { width: 64px; height: 64px; }
.pvc .ring .av { width: 100%; height: 100%; }
.pvc b { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.pvc .sub { color: var(--muted); font-size: 12px; }
.pvc p { grid-column: 1 / -1; color: var(--ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.pvc .chipline { grid-column: 1 / -1; margin-top: 0; }

/* ---------- dialogs ---------- */
.sheet, .pv { position: fixed; inset: 0; z-index: 100; background: var(--scrim, rgba(0, 0, 0, .65)); display: none; place-items: center; padding: 16px; }
.sheet.open, .pv.open { display: grid; animation: fade .1s ease; }
@keyframes fade { from { opacity: 0; } }
.dlg { width: min(400px, 100%); background: var(--elev); border-radius: 16px; overflow: hidden; animation: zoom .12s ease; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
@keyframes zoom { from { transform: scale(.97); opacity: 0; } }
.dlg-h { padding: 24px 24px 18px; text-align: center; }
.dlg-h h3 { font-size: 20px; line-height: 25px; font-weight: 700; }
.dlg-h p { color: var(--muted); margin-top: 6px; }
.dlg .row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 16px; border-top: 1px solid var(--line-soft); font-size: 14px; text-align: center; }
.dlg .row:first-child { border-top: 0; }
.dlg .row:active { background: var(--hover); }
.dlg .row.blue { color: var(--blue); font-weight: 700; }
.dlg .row.red { color: var(--red); font-weight: 700; }
.dlg .row small { color: var(--muted); font-size: 12px; }
.wl-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; object-fit: contain; }
.wl-ic.pad { padding: 4px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.pv-box { width: min(470px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--elev); border-radius: 12px; padding: 14px 14px 0; position: relative; }
.pv-box .post { border-bottom: 0; margin-bottom: 0; padding-bottom: 16px; }
.pv-x { position: fixed; top: 12px; right: 12px; color: #fff; z-index: 101; }
.pv-x svg.i { width: 28px; height: 28px; }

/* ---------- story viewer ---------- */
.story { position: fixed; inset: 0; z-index: 120; background: #1a1a1a; display: none; align-items: center; justify-content: center; gap: 24px; color: #fff; }
.story.open { display: flex; }
.st-brand { position: absolute; top: 18px; left: 20px; color: #fff; }
.st-x { position: absolute; top: 12px; right: 12px; color: #fff; padding: 8px; }
.st-x svg.i { width: 28px; height: 28px; }
.st-arrow { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #262626; display: grid; place-items: center; flex: none; }
.st-arrow svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
.st-arrow:disabled { visibility: hidden; }
.st-card { position: relative; height: min(92vh, 860px); aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #000; container-type: inline-size; }
.st-card .m.art img { top: 16%; height: 84%; }
.st-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 4; }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.st-bars b { display: block; height: 100%; width: 0; background: #fff; }
.st-head { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 4; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.st-head .av { width: 32px; height: 32px; }
.st-head b { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.st-head time { opacity: .75; }
.st-head .tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); margin-left: auto; }
.st-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .22), transparent 12%, transparent 78%, rgba(0, 0, 0, .3)); }
.st-tap { position: absolute; top: 0; bottom: 0; z-index: 3; }
.st-tap.l { left: 0; width: 32%; }
.st-tap.r { right: 0; width: 68%; }
.st-foot { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 4; }
.st-cap { font-size: 15px; line-height: 20px; font-weight: 600; margin-bottom: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.st-btns { display: flex; gap: 8px; }
.st-btns a { flex: 1; height: 44px; border-radius: 22px; display: grid; place-items: center; font-weight: 600; border: 1px solid rgba(255, 255, 255, .7); }
.st-btns a.fill { background: #fff; color: #000; border-color: #fff; }
.st-launch { position: absolute; left: 12px; right: 12px; top: 74px; z-index: 4; background: rgba(255, 255, 255, .92); color: #000; border-radius: 14px; padding: 14px; }
.st-launch b { font-size: 15px; }
.st-launch p { color: #444; margin: 4px 0 10px; font-size: 13px; }
.st-launch .bar { background: #e6e6e6; height: 6px; }
.st-launch .row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-top: 8px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; visibility: hidden; background: #262626; color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; z-index: 200; box-shadow: var(--shadow); transition: transform .25s ease, opacity .25s ease, visibility .25s; max-width: calc(100vw - 32px); text-align: center; }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- responsive ---------- */
@media (min-width: 1160px) { .rail { display: block; } }

@media (max-width: 1263px) {
  :root { --sbw: 72px; }
  .sb { padding: 8px 12px 20px; }
  .sb .lbl, .sb .wordmark { display: none; }
  .sb-brand { justify-content: center; padding: 22px 0 0; }
  .sb-brand .logo-mark { display: block; }
  .sb-nav a, .sb-item { justify-content: center; }
}

@media (max-width: 767px) {
  :root { --sbw: 0px; }
  .sb { display: none; }
  .mtop { display: flex; position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 8px 0 16px; align-items: center; justify-content: space-between; background: var(--bg); border-bottom: 1px solid var(--line); }
  .mtop .wordmark { font-size: 25px; }
  .mtop-r { display: flex; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(50px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); justify-content: space-around; align-items: center; }
  .tabbar > * { flex: 1; height: 50px; display: grid; place-items: center; }
  .main { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(66px + env(safe-area-inset-bottom)); }

  .home { padding: 0; }
  .stories { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--line); }
  .post { padding-bottom: 16px; margin-bottom: 8px; }
  .post-h { padding: 0 12px 10px; }
  .post-m, .car { border-radius: 0; border-left: 0; border-right: 0; }
  .acts { margin: 4px 8px 0 4px; }
  .likes, .cap, .vc, .pstats, .cta, .addc { margin-left: 16px; margin-right: 16px; }
  .sugg-h { padding: 0 16px 12px; }
  .sugg-row { padding: 0 16px; scroll-padding: 0 16px; }
  .faq { padding: 8px 0; }
  .faq summary, .faq details p { padding-left: 0; padding-right: 0; }

  .ex { padding: 12px 16px 0; }
  .ex-top { flex-direction: column; align-items: stretch; }
  .search { flex: none; }
  .xgrid { margin: 0 -16px; gap: 2px; }
  .pgrid { gap: 2px; }

  .prof { padding: 16px 16px 0; }
  .ph { grid-template-columns: auto 1fr; gap: 0 24px; margin-bottom: 16px; align-items: start; }
  .ph-av .ring { width: 86px; height: 86px; padding: 5px; }
  .ph-av .ring .av { box-shadow: 0 0 0 3px var(--bg); }
  .ph-r1 h1 { font-size: 18px; margin-right: 0; }
  .ph-r1 .btn, .ph-r1 .ib { display: none; }
  .ph-stats { gap: 0; justify-content: space-between; margin: 10px 0 0; font-size: 14px; line-height: 18px; }
  .ph-stats li { display: flex; flex-direction: column; text-align: center; color: var(--ink2); }
  .ph-bio-d { display: none; }
  .ph-bio-m { display: block; grid-column: 1 / -1; margin-top: 14px; }
  .ph-btns-m { display: flex; gap: 6px; grid-column: 1 / -1; margin-top: 14px; }
  .ph-btns-m .btn { flex: 1; }
  .hl { gap: 18px; padding: 0 0 20px; margin: 0 -16px; padding-left: 16px; }
  .hl .hc { width: 64px; height: 64px; }
  .hl .hc svg.i { width: 24px; height: 24px; }
  .ptabs { gap: 0; margin: 0 -16px; }
  .ptabs button { flex: 1; justify-content: center; }
  .ptabs button span { display: none; }
  .ptabs button svg.i { width: 24px; height: 24px; stroke-width: 2; }
  .ptabs button.on svg.i { color: var(--blue); }
  .ptabs button { border-top: 0; }
  .pgrid { margin: 0 -16px; }
  .curve { margin-bottom: 20px; }

  .cr-wrap { padding: 0; }
  .cr { border: 0; border-radius: 0; max-width: none !important; }
  .cr:not([data-step="0"]) .cr-body { grid-template-columns: 1fr; }
  .cr:not([data-step="0"]) .cr-media { padding: 12px 16px 0; }
  .cr:not([data-step="0"]) .drop { width: 120px; margin: 0 auto; }
  .cr:not([data-step="0"]) .drop-change { display: none; }
  .cr-side { border-left: 0; max-height: none; }
  .story { gap: 0; }
  .st-arrow, .st-brand { display: none; }
  .st-card { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
  .st-x { z-index: 5; top: 26px; right: 4px; }
  .st-head { right: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =================================================================
   Fee-funded studio: receipts, activity, studio card, how page
   ================================================================= */
.nav-ic { position: relative; display: block; }
.live-dot { position: absolute; top: -1px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #ff3040; box-shadow: 0 0 0 2px var(--bg); }
.live-dot[hidden] { display: none; }

/* series swatches */
.s-studio { background: var(--s-studio); }
.s-growth { background: var(--s-growth); }
.s-platform { background: var(--s-platform); }
.s-owner { background: var(--s-owner); }
.split { display: flex; gap: 2px; height: 10px; width: 100%; }
.split i { display: block; min-width: 3px; border-radius: 3px; cursor: default; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; line-height: 16px; color: var(--ink2); margin-top: 8px; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend b { font-weight: 600; color: var(--ink); }
.meter { height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--s-studio) 18%, transparent); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--s-studio); }
.tip { position: fixed; z-index: 300; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; line-height: 16px; padding: 6px 9px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }


/* feed: receipt, new-posts pill, caught up */
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }
.caught { text-align: center; padding: 28px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.caught .ck { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; padding: 3px; background: var(--ig); }
.caught .ck span { width: 100%; height: 100%; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.caught .ck svg.i { width: 30px; height: 30px; stroke: url(#igGrad); stroke-width: 2.4; }
.caught h3 { font-size: 20px; font-weight: 800; line-height: 25px; }
.caught p { color: var(--muted); margin: 4px 0 10px; }

/* sheet key/value rows */
.dlg .kv { display: flex; justify-content: space-between; gap: 16px; padding: 11px 20px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.dlg .kv span { color: var(--muted); }
.dlg .kv b { font-weight: 600; text-align: right; }
.dlg .kv.total b { font-size: 16px; }
.dlg .kv-note { padding: 10px 20px 14px; color: var(--muted); font-size: 12px; line-height: 16px; text-align: center; border-top: 1px solid var(--line-soft); }

/* status pills */
.spill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--btn2); color: var(--ink2); white-space: nowrap; }
.spill i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted2); }
.spill.awake i { background: #0ca30c; box-shadow: 0 0 0 3px rgba(12, 163, 12, .2); }
.spill.waking i { background: #fab219; }
.spill.resting i { background: var(--muted2); }

/* activity rows (feed page + rail) */
.actv { max-width: 600px; margin: 0 auto; padding: 24px 16px 0; }
.actv-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.actv-h h1 { font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -.01em; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #ff3040; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.actv .chips { margin-bottom: 8px; }
.ev-sec { font-size: 16px; font-weight: 800; margin: 18px 4px 6px; }
.ev { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 8px; }
.ev .ring { width: 44px; height: 44px; }
.ev .ring .av { width: 100%; height: 100%; }
.ev .tx { flex: 1; min-width: 0; line-height: 18px; overflow-wrap: anywhere; }
.ev .tx b { font-weight: 700; }
.ev .tx a.un:hover { color: var(--muted); }
.ev .tx time { color: var(--muted); margin-left: 4px; white-space: nowrap; }
.ev .tx .sub2 { display: block; color: var(--muted); font-size: 12px; line-height: 16px; margin-top: 2px; }
.ev .thumb { width: 44px; height: 44px; border-radius: 4px; flex: none; position: relative; overflow: hidden; container-type: inline-size; }
.ev .thumb .m .prop { display: none; }
.ev .amt { flex: none; font-weight: 700; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--btn2); font-variant-numeric: tabular-nums; }
.ev .amt.cost { background: transparent; border: 1px solid var(--line); color: var(--ink2); }
.ev.fresh { animation: flash 1.6s ease; }
@keyframes flash { from { background: color-mix(in srgb, var(--blue) 14%, transparent); } }
.rail .ev { padding: 6px 4px; gap: 10px; }
.rail .ev .ring { width: 36px; height: 36px; }
.rail .ev .tx { font-size: 13px; line-height: 17px; }
.rail .ev .amt { font-size: 12px; padding: 4px 8px; }
.rail .ev .tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rh .live { font-size: 11px; }
.rwake { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.rwake .ring { width: 36px; height: 36px; }
.rwake .ring .av { width: 100%; height: 100%; }
.rwake .rt span { font-size: 12px; }
.rwake .meter { margin-top: 5px; height: 4px; }

/* profile studio card */
.studio { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 32px; }
.studio-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.studio-top b { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.studio-top b svg.i { width: 18px; height: 18px; }
.snums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.snums b { display: block; font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.snums span { color: var(--muted); font-size: 12px; font-weight: 600; }
.studio .meter-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.studio .blk { margin-top: 14px; }
.studio .blk-h { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--btn2); font-size: 12px; font-weight: 600; }
.mchip span { color: var(--muted); font-weight: 600; }
.studio .foot2 { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.studio .foot2 b { color: var(--ink2); font-weight: 600; }

/* explore tile status */
.tile .lab .st { display: inline-flex; align-items: center; gap: 4px; }
.tile .lab .st i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc3d; }
.tile .lab .st.waking i { background: #fab219; }
.tile .lab .st.resting i { background: #bbb; }

/* create: model pickers + fee routing */
.opt .l small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
.mpick { display: flex; flex-direction: column; gap: 6px; }
.mpick button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-align: left; transition: border-color .15s, box-shadow .15s; }
.mpick button:hover { border-color: var(--muted2); }
.mpick button.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mpick .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; transition: border .15s; }
.mpick button.on .radio { border: 5px solid var(--ink); }
.mpick .mn { flex: 1; min-width: 0; }
.mpick .mn b { display: block; font-weight: 600; line-height: 18px; }
.mpick .mn small { color: var(--muted); font-size: 12px; line-height: 16px; }
.mpick .mc { font-size: 12px; font-weight: 600; color: var(--ink2); white-space: nowrap; text-align: right; line-height: 16px; }
.mpick .mc small { display: block; color: var(--muted); font-weight: 400; }
.fee-route { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 4px 0 12px; }
.fee-route .fr-h { font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
.fee-route .fr-h span { color: var(--muted); font-weight: 600; font-size: 12px; }
.fee-route .fr-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; color: var(--ink2); }
.fee-route .fr-row b { font-weight: 600; color: var(--ink); text-align: right; }

/* how page */
.how { max-width: 780px; margin: 0 auto; padding: 32px 20px 0; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--ig); -webkit-background-clip: text; background-clip: text; color: transparent; }
.how-h h1 { font-size: clamp(30px, 5.4vw, 44px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; margin: 10px 0 14px; }
.how-h p { font-size: 16px; line-height: 24px; color: var(--ink2); max-width: 60ch; }
.how-h p b, .lead b { color: var(--ink); font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 28px 0 4px; }
.kpi { border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.kpi b { display: block; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: 12px; font-weight: 600; }
.hsec { padding: 30px 0; border-bottom: 1px solid var(--line); }
.hsec h2 { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.lead { color: var(--ink2); line-height: 20px; margin-bottom: 18px; max-width: 64ch; }
.fine { color: var(--muted); font-size: 12px; line-height: 17px; margin-top: 14px; max-width: 64ch; }
.loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.loop li { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.loop li svg.i { width: 26px; height: 26px; }
.loop b { display: block; margin: 12px 0 4px; font-weight: 800; }
.loop p { color: var(--ink2); font-size: 13px; line-height: 18px; }
.wf-row { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.wf-row:last-child { border-bottom: 0; }
.wf-row .rng { font-weight: 800; font-variant-numeric: tabular-nums; }
.wf-row .rng small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.wf-row .split { height: 14px; }
.wf-row .wl { grid-column: 2; font-size: 12px; color: var(--ink2); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.calc .field { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.calc .field span { font-weight: 600; }
.calc .field b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc input[type="range"] { width: 100%; accent-color: var(--blue); }
.calc-sel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.calc-sel label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.calc-sel select { width: 100%; min-width: 0; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; text-overflow: ellipsis; }
.calc-in, .calc-out { min-width: 0; }
.calc-out .co-big { font-size: 15px; line-height: 21px; color: var(--ink2); margin: 12px 0 0; }
.calc-out .co-big b { color: var(--ink); font-weight: 700; }
.calc-out .split { height: 14px; }
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rung { border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.rung b { display: block; font-weight: 700; }
.rung .what { display: block; color: var(--ink2); font-size: 12px; line-height: 16px; margin: 4px 0 8px; min-height: 32px; }
.rung .c { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.rung .c small { color: var(--muted); font-weight: 400; }
.rung.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tbl-wrap { overflow-x: auto; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td small { display: block; color: var(--muted); font-size: 12px; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.limits li { display: flex; gap: 10px; padding: 7px 0; line-height: 20px; }
.limits li svg.i { width: 20px; height: 20px; stroke-width: 2.6; color: var(--blue); }
.how .faq { padding-top: 24px; scroll-margin-top: 8px; }
.how .faq h2 { font-size: 22px; font-weight: 800; padding: 0 0 8px; }

@media (max-width: 900px) {
  .loop { grid-template-columns: 1fr 1fr; }
  .ladder { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .how .faq { scroll-margin-top: 64px; }
  .how { padding: 20px 16px 0; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .wf-row { grid-template-columns: 1fr; }
  .wf-row .wl { grid-column: 1; }
  .ladder { grid-template-columns: 1fr 1fr; }
  .snums { grid-template-columns: 1fr 1fr; }
  .actv { padding: 16px 16px 0; }
}
@media (max-width: 480px) {
  .loop { grid-template-columns: 1fr; }
}

.ev .eic { width: 36px; height: 36px; border-radius: 50%; background: var(--btn2); display: grid; place-items: center; flex: none; color: var(--ink2); }
.ev .eic svg.i { width: 18px; height: 18px; }
button.thumb { padding: 0; border: 0; cursor: pointer; }
.about .ev { padding: 10px 4px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
.about .ev:last-child { border-bottom: 0; }

/* =================================================================
   Accounts, comments, chart, persona, feed slots
   ================================================================= */
.hav { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; overflow: hidden; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.hav img { width: 100%; height: 100%; object-fit: cover; }
.me-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.me-ic .hav { font-size: 11px; }
[data-nav].on .me-ic.has .hav { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.racc-av { display: block; width: 44px; height: 44px; flex: none; }
.racc-av .hav { font-size: 18px; }

/* feed */
.slot { font-weight: 700; }
.slot.new { color: var(--blue); }
button.vc { display: block; padding: 0; text-align: left; }
.addc { display: block; width: 100%; text-align: left; color: var(--muted); padding: 8px 0 0; }
.addc:hover { color: var(--ink2); }
.feed-more { display: grid; place-items: center; padding: 28px 0 44px; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--muted); animation: spin .8s linear infinite; }

/* post viewer + comments */
.pv { padding: 24px; }
.pm { width: min(1100px, 100%); height: min(88vh, 820px); display: grid; grid-template-columns: minmax(0, 1fr) 400px; background: var(--elev); border-radius: 6px; overflow: hidden; }
.pm-media.post-m { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.pm-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); }
.pm-h { padding: 14px 10px 14px 14px; border-bottom: 1px solid var(--line); }
.pm-cmts { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 18px; }
.cm { display: flex; gap: 12px; align-items: flex-start; border-radius: 8px; }
.cm-av { width: 32px; height: 32px; flex: none; display: block; }
.cm-av .av, .cm-av .hav { width: 100%; height: 100%; }
.cm-av .hav { font-size: 13px; }
.cm-b { min-width: 0; }
.cm-b p { line-height: 18px; overflow-wrap: anywhere; }
.cm-b .un { margin-right: 2px; }
.cm-b .vb { margin-right: 4px; }
.cm-meta { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
.cm-meta b { color: var(--ink2); font-weight: 700; }
.cm.fresh { animation: flash 1.6s ease; }
.dots3 { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.dots3 i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.dots3 i:nth-child(2) { animation-delay: .2s; }
.dots3 i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.pm-foot { border-top: 1px solid var(--line); padding: 4px 14px 0; }
.pm-foot .acts { margin-left: -8px; }
.pm .likes { margin-left: 0; margin-right: 0; }
.pm-time { display: block; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 12px; }
.pm-add { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 10px 14px; background: var(--elev); }
.pm-add .cm-av { width: 28px; height: 28px; }
.pm-add input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 14px; }
.pm-add button { color: var(--blue); font-weight: 700; }
.pm-add button:disabled { opacity: .4; cursor: default; }
.pm-login { display: block; text-align: center; border-top: 1px solid var(--line); padding: 14px; color: var(--blue); font-weight: 700; background: var(--elev); }

/* account pages */
.auth { max-width: 400px; margin: 0 auto; padding: 40px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.auth-card { border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px 24px; display: flex; flex-direction: column; gap: 10px; text-align: center; background: var(--bg); }
.auth-card .wordmark { font-size: 44px; margin: 4px 0 4px; }
.auth-sub { font-size: 17px; line-height: 23px; font-weight: 700; color: var(--ink2); margin-bottom: 12px; }
.auth-fine { color: var(--muted); font-size: 12px; margin-top: 6px; }
.auth-card.slim { padding: 18px; flex-direction: row; justify-content: center; gap: 6px; }
.acct { text-align: left; }
.acct h1 { font-size: 22px; font-weight: 800; text-align: center; letter-spacing: -.01em; }
.acct .lnk { align-self: center; font-size: 13px; margin-top: 4px; }
.acct .tick input { text-transform: none; letter-spacing: 0; font-weight: 600; }
.av-pick { position: relative; display: block; width: 96px; height: 96px; margin: 8px auto 0; cursor: pointer; }
.av-pick #avPrev { display: block; width: 100%; height: 100%; }
.av-pick .hav { font-size: 38px; }
.av-edit { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); }
.av-edit svg.i { width: 16px; height: 16px; }
.wchip { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 5px 10px; border-radius: 999px; background: var(--btn2); font-size: 12px; font-weight: 700; }
.wchip svg.i { width: 14px; height: 14px; }
.tagd { padding: 1px 6px; border-radius: 4px; background: var(--ink); color: var(--bg); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.field label small.ok { color: #0ca30c; font-weight: 700; }
.field label small.bad { color: var(--red); font-weight: 700; }
.me-av { display: block; width: 150px; height: 150px; }
.me-av .hav { font-size: 56px; }
.mycm .thumb { order: -1; }

/* social icons + status row */
.ph-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.soc { display: inline-flex; gap: 6px; }
.soc-b { width: 32px; height: 32px; border-radius: 50%; background: var(--btn2); color: var(--ink); display: grid; place-items: center; transition: background .15s, transform .15s; }
.soc-b:hover { background: var(--btn2-h); transform: translateY(-1px); }
.soc-b svg.i { width: 16px; height: 16px; }

/* coin card (TradingView chart) */
.coin { border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 12px; margin-bottom: 28px; }
.coin-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.coin-h .lbl { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.coin-h .big { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -.02em; margin-right: 8px; font-variant-numeric: tabular-nums; }
.chg { font-weight: 800; font-size: 14px; white-space: nowrap; }
.chg.up { color: #089981; }
.chg.down { color: #f23645; }
.chg.flat { color: var(--ink2); }
.chg small { color: var(--muted); font-weight: 600; }
.seg { display: inline-flex; background: var(--btn2); border-radius: 10px; padding: 3px; }
.seg button { height: 30px; padding: 0 12px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.tv { position: relative; height: 260px; margin: 0 -6px; }
.tv-off { height: 100%; display: grid; place-items: center; color: var(--muted); }
.coin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 8px; }
.coin-stats b { display: block; font-size: 17px; line-height: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coin-stats span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* persona */
.pz { max-width: 640px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 12px; }
.pz-hero { border-radius: 18px; padding: 26px 24px 22px; color: #fff; background: linear-gradient(135deg, #7638fa, #d300c5 55%, #ff0069); }
.pz-k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.pz-hero h2 { font-size: clamp(28px, 5vw, 36px); line-height: 1.06; font-weight: 900; letter-spacing: -.02em; margin: 8px 0 10px; }
.pz-q { font-size: 17px; line-height: 24px; font-weight: 600; }
.pz-q::before { content: "“"; }
.pz-q::after { content: "”"; }
.pz-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pz-tags span { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); font-weight: 800; font-size: 14px; }
.pz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pz-tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-width: 0; }
.pz-tile span { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.pz-tile b { display: block; font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-tile small { color: var(--ink2); font-size: 12px; }
.pz-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.pz-l { font-weight: 800; min-width: 72px; }
.pz-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#ptab > .studio { margin-top: 8px; }

@media (max-width: 767px) {
  .pv { padding: 0; }
  .pm { width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; border-radius: 0; }
  .pm-side { display: contents; }
  .pm-h { order: 1; padding-right: 52px; }
  .pm-media.post-m { order: 2; height: auto; aspect-ratio: 4 / 5; flex: none; }
  .pm-foot { order: 3; border-top: 0; }
  .pm-cmts { order: 4; flex: none; overflow: visible; border-top: 1px solid var(--line); }
  .pm-add, .pm-login { order: 5; position: sticky; bottom: 0; margin-top: auto; }
  .pv-x { color: var(--ink); top: 6px; right: 4px; }
  .me-av { width: 86px; height: 86px; }
  .me-av .hav { font-size: 34px; }
  .tv { height: 220px; }
  .coin-h .big { font-size: 26px; }
  .auth { padding-top: 24px; }
  .addc { width: calc(100% - 32px); }
}

/* =================================================================
   Round 4: polls, model logos, create footer, starter posts
   ================================================================= */
.sheet { z-index: 110; }

/* nav: shade icons on hover, fill when active */
.sb-nav a:not(.on):hover svg.i .f, .tabbar a:not(.on):hover svg.i .f,
[data-nav]:not(.on):hover svg.i.heart { fill: color-mix(in srgb, currentColor 22%, transparent); }
[data-nav="activity"].on svg.i.heart { fill: currentColor; }

/* square profile pictures on profile pages */
.ph-av .ring, .ph-av .ring.seen { border-radius: 34px; }
.ph-av .ring .av { border-radius: 28px; }
.me-av .hav { border-radius: 28px; }

/* create: footer with the Next bubble */
.cr-top { grid-template-columns: 48px 1fr 48px; }
.cr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--elev); }
.cr[data-step="3"] .cr-foot { display: none; }
.cr-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-go { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 42px; padding: 0 18px 0 24px; border-radius: 999px; background: #0058d6; color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 6px 18px rgba(0, 88, 214, .3); transition: background .15s, transform .15s, box-shadow .15s; }
.cr-go:hover { background: #0047b3; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 71, 179, .35); }
.cr-go:active { transform: none; }
.cr-go:disabled { background: var(--btn2); color: var(--muted); box-shadow: none; transform: none; cursor: default; }
.cr-go svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
.cr-go.wide { width: 100%; height: 48px; padding: 0 24px; }
.chk { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin-top: 1px; accent-color: #0058d6; flex: none; }
.chk b { display: block; font-weight: 700; }
.chk small { display: block; color: var(--muted); font-size: 12px; line-height: 16px; margin-top: 2px; }

/* model logos */
.mlogo { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); overflow: hidden; flex: none; }
.mlogo em { font-style: normal; font-weight: 800; font-size: 12px; color: #444; }
.mlogo img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.mlogos { display: inline-flex; flex: none; }
.mlogos .mlogo + .mlogo { margin-left: -8px; box-shadow: 0 0 0 2px var(--elev), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.mpick button { gap: 10px; }
.mpick .mn b { display: flex; align-items: center; gap: 6px; }
.budget { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0a7a2f; background: rgba(12, 163, 12, .12); padding: 2px 6px; border-radius: 4px; }
.mchip .mlogo, .mchip .mlogos .mlogo { width: 20px; height: 20px; border-radius: 5px; }
.mchip .mlogo em { font-size: 10px; }
.pz-tile span { display: flex; align-items: center; gap: 8px; }
.pz-tile .mlogo { width: 22px; height: 22px; border-radius: 6px; }
.tm { display: flex; align-items: center; gap: 10px; }
.tm small { display: block; color: var(--muted); font-size: 12px; white-space: normal; }

/* AI-run polls (sticker style) */
.poll { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(82%, 340px); z-index: 4; background: rgba(255, 255, 255, .94); color: #111; border-radius: 16px; padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); backdrop-filter: blur(8px); text-align: center; }
.poll-q { font-weight: 800; font-size: 15px; line-height: 20px; margin: 2px 4px 10px; }
.poll-o { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.poll-o button { position: relative; overflow: hidden; height: 42px; border-radius: 10px; background: #f1f1f3; color: #111; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; transition: background .15s, transform .1s; }
.poll-o button:not(:disabled):hover { background: #e6e6ea; }
.poll-o button:not(:disabled):active { transform: scale(.97); }
.poll-o button span, .poll-o button b { position: relative; z-index: 1; }
.poll-o button b { font-weight: 900; }
.poll-o button i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffd7e6, #e9dcff); z-index: 0; transition: width .4s ease; }
.poll-o button.win i { background: linear-gradient(90deg, #ffb3cf, #d3bcff); }
.poll-o button.mine { box-shadow: inset 0 0 0 2px #111; }
.poll-o button:disabled { cursor: default; }
.poll-m { font-size: 11px; font-weight: 700; color: #666; margin-top: 8px; }
.st-poll .poll { bottom: 26%; z-index: 5; }

/* starter post composer */
.cmp { width: min(420px, 100%); background: var(--elev); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cmp-h { display: flex; justify-content: space-between; align-items: baseline; }
.cmp-h b { font-size: 17px; font-weight: 800; }
.cmp-h span { font-size: 12px; font-weight: 700; color: var(--muted); }
.cmp-img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; cursor: pointer; }
.cmp textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 10px 12px; outline: none; resize: vertical; line-height: 20px; }
.cmp textarea:focus { border-color: var(--muted2); }
.cmp .hint { margin: 0; }

@media (max-width: 767px) {
  .ph-av .ring, .ph-av .ring.seen { border-radius: 22px; }
  .ph-av .ring .av { border-radius: 18px; }
  .me-av .hav { border-radius: 18px; }
  .cr-foot { position: sticky; bottom: calc(50px + env(safe-area-inset-bottom)); z-index: 5; }
  .poll { width: 84%; }
  .cmp { border-radius: 0; min-height: 100%; }
}

.cr:not([data-step="0"]) .cr-body { grid-template-columns: minmax(0, 1fr) 380px; }
.mpick .mn small.mp { display: block; color: var(--ink); font-weight: 700; margin-top: 3px; }
.mpick .mn small { display: block; }
@media (max-width: 767px) { .cr:not([data-step="0"]) .cr-body { grid-template-columns: 1fr; } }

/* story text stays readable now that the shade is lighter */
.st-cap { text-shadow: 0 1px 2px rgba(0, 0, 0, .65), 0 0 14px rgba(0, 0, 0, .35); }
.st-btns a:not(.fill) { background: rgba(0, 0, 0, .3); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .55); }

/* =================================================================
   Round 5: modern menu, threaded comments, comment likes
   ================================================================= */
.menu-root { position: fixed; inset: 0; z-index: 130; }
.menu-root[hidden] { display: none; }
.menu { position: fixed; min-width: 236px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 14px; background: var(--elev); box-shadow: 0 0 0 1px var(--line-soft), 0 16px 40px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .06); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right; transition: opacity .09s ease, transform .09s ease; }
.menu.up { transform-origin: bottom right; transform: translateY(4px) scale(.98); }
.menu-root.open .menu { opacity: 1; transform: none; }
.mi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 18px; text-align: left; color: var(--ink); white-space: nowrap; }
.mi:hover, .mi:focus-visible { background: var(--hover); outline: none; }
.mi svg.i { width: 20px; height: 20px; flex: none; }
.mi em { margin-left: auto; padding-left: 12px; color: var(--muted); display: inline-flex; }
.mi em svg.i { width: 14px; height: 14px; }
.mi.danger { color: var(--red); }
.msep { height: 1px; background: var(--line-soft); margin: 6px 6px; }
.menu-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .14s ease; }
.menu-root.open .menu-scrim { opacity: 1; }
.menu.bottom { left: 0; right: 0; bottom: 0; top: auto; max-width: none; border-radius: 20px 20px 0 0; padding: 8px 10px calc(16px + env(safe-area-inset-bottom)); opacity: 1; transform: translateY(100%); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.menu-root.open .menu.bottom { transform: none; }
.menu.bottom .mi { padding: 14px 12px; font-size: 16px; }
.menu.bottom .mi svg.i { width: 22px; height: 22px; }
.grab { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 10px; }

/* comments: threads, replies, likes */
.pm-cmts { gap: 14px; }
.th { display: flex; flex-direction: column; gap: 10px; }
.cm { position: relative; align-items: flex-start; padding-right: 30px; }
.cm.is-cap { padding-right: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.cm-b p { line-height: 19px; }
.cm-badge { display: inline-block; margin: 0 4px 0 2px; padding: 0 6px; border-radius: 4px; background: var(--btn2); font-size: 10px; font-weight: 800; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); vertical-align: 1px; }
.mention { color: var(--link); font-weight: 600; }
.cm-meta { display: flex; align-items: center; gap: 12px; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cm-meta time { font-weight: 500; }
.cm-meta [data-clikes]:empty { display: none; }
.cm-reply { color: var(--muted); font-weight: 700; font-size: 12px; padding: 0; }
.cm-reply:hover { color: var(--ink2); }
.cm-al { position: relative; display: inline-block; width: 16px; height: 16px; }
.cm-al .av { width: 16px; height: 16px; }
.cm-al i { position: absolute; right: -5px; bottom: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--elev); display: grid; place-items: center; }
.cm-al i svg.i { width: 9px; height: 9px; fill: var(--red); stroke: var(--red); }
.cm-like { position: absolute; right: 2px; top: 4px; padding: 4px; color: var(--muted); transition: color .15s, transform .15s; }
.cm-like svg.i { width: 13px; height: 13px; stroke-width: 2.2; }
.cm-like:hover { color: var(--ink2); }
.cm-like.on { color: var(--red); }
.cm-like.on svg.i { fill: var(--red); animation: pop .3s ease; }
.cm.rep { margin-left: 44px; }
.cm.rep .cm-av { width: 24px; height: 24px; }
.cm.rep .cm-av .hav { font-size: 11px; }
.th-tog { display: flex; align-items: center; gap: 12px; margin-left: 44px; padding: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.th-tog i { width: 24px; height: 1px; background: var(--muted2); }
.th-tog:hover { color: var(--ink2); }
.th-reps { display: flex; flex-direction: column; gap: 10px; }
.th-reps[hidden] { display: none; }
.pm-add { flex-direction: column; align-items: stretch; gap: 8px; }
.pm-row { display: flex; align-items: center; gap: 10px; }
.pm-replying { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pm-replying[hidden] { display: none; }
.pm-replying b { color: var(--ink); }
.pm-replying button { margin-left: auto; color: var(--muted); padding: 2px; }
.pm-replying svg.i { width: 14px; height: 14px; }

/* =================================================================
   Round 6: insights panel, cleaner chart, explore MC, nav motion
   ================================================================= */
/* explore tile label */
.tile .lab .mc { display: block; font-size: clamp(12px, 6cqw, 15px); font-weight: 800; letter-spacing: -.01em; }
.tile .lab span { margin-bottom: 2px; }

/* collapsible insights (like Instagram's professional dashboard row) */
.ins { margin-bottom: 28px; }
.ins-bar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--btn2); text-align: left; transition: background .15s; }
.ins-bar:hover { background: var(--btn2-h); }
.ins-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; flex: none; }
.ins-ic svg.i { width: 20px; height: 20px; }
.ins-t { flex: 1; min-width: 0; }
.ins-t > b { display: block; font-weight: 800; font-size: 14px; }
.ins-t > span { display: block; color: var(--ink2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-t > span b { font-weight: 700; color: var(--ink); }
.ins-chev { flex: none; color: var(--muted); transition: transform .25s ease; }
.ins-chev svg.i { width: 18px; height: 18px; stroke-width: 2.4; }
.ins.open .ins-chev { transform: rotate(180deg); }
.ins-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ins.open .ins-body { grid-template-rows: 1fr; }
.ins-in { overflow: hidden; min-height: 0; }
.ins-in > .studio { margin: 10px 0 10px; }
.ins-in > .coin { margin: 0; }

/* cleaner chart card */
.coin { padding: 14px 16px 12px; }
.coin-top { align-items: center; margin-bottom: 10px; }
.rngs { display: inline-flex; gap: 2px; }
.rngs button { height: 28px; min-width: 38px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.rngs button:hover { color: var(--ink); background: var(--hover); }
.rngs button.on { color: var(--ink); background: var(--btn2); }
.coin-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.coin-h .big { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 0; }
.coin-h .when { color: var(--muted); font-size: 13px; font-weight: 600; margin-left: 6px; }
.tv { height: 200px; margin: 8px -6px 0; }
.coin-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); font-weight: 600; }
.coin-foot a { color: var(--muted); font-weight: 500; }
.coin-foot a:hover { color: var(--ink2); text-decoration: underline; }
.ledger { margin-top: 4px; }

/* appearance: icon-only round button */
.theme-btn { width: 44px; height: 44px; margin: 0 0 4px 4px; border-radius: 50%; display: grid; place-items: center; background: var(--btn2); color: var(--ink); transition: background .15s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.theme-btn:hover { background: var(--btn2-h); transform: rotate(-18deg) scale(1.06); }
.theme-btn:active { transform: scale(.9); transition-duration: .08s; }
.theme-btn svg.i { width: 22px; height: 22px; }
@media (max-width: 1263px) { .theme-btn { margin: 0 auto 4px; } }

/* sidebar motion */
.sb-nav a { transition: background .15s, transform .12s; }
.sb-nav a:active { transform: scale(.97); }
.sb-nav a svg.i, .sb-nav a .me-ic { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.sb-nav a:hover svg.i, .sb-nav a:hover .me-ic { transform: scale(1.12); }
.sb-nav [data-nav="explore"]:hover svg.i { transform: rotate(-25deg) scale(1.12); }
.sb-nav [data-nav="create"]:hover svg.i { transform: rotate(90deg) scale(1.08); }
.sb-nav [data-nav="activity"]:hover svg.i { animation: beat .7s ease; }
.sb-nav a:active svg.i, .sb-nav a:active .me-ic { transform: scale(.86); transition-duration: .08s; }
.sb-nav a.on svg.i, .sb-nav a.on .me-ic { animation: navpop .4s cubic-bezier(.34, 1.56, .64, 1); }
.sb-nav .lbl { transition: transform .2s ease; }
.sb-nav a:hover .lbl { transform: translateX(2px); }
.tabbar a svg.i, .tabbar a .me-ic { transition: transform .15s ease; }
.tabbar a:active svg.i, .tabbar a:active .me-ic { transform: scale(.85); }
.tabbar a.on svg.i, .tabbar a.on .me-ic { animation: navpop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes navpop { 0% { transform: scale(.82); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.2); } 45% { transform: scale(1.05); } 65% { transform: scale(1.16); } }

@media (max-width: 767px) {
  .ins { margin-bottom: 18px; }
  .tv { height: 180px; }
}

/* =================================================================
   Round 7: compact, sticky right rail
   ================================================================= */
.rail { width: 300px; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow: hidden; padding-top: 30px; }
.racc .racc-av { width: 40px; height: 40px; }
.rh { margin: 22px 4px 6px; }
.rh span { font-size: 13px; }
.rail .ev.ev-c { gap: 10px; padding: 5px 4px; align-items: center; }
.rail .ev-c .ring { width: 32px; height: 32px; padding: 2.5px; }
.rail .ev-c .ring > .av { box-shadow: 0 0 0 1.5px var(--bg); }
.rail .ev-c .tx { flex: 1; min-width: 0; display: block; -webkit-line-clamp: unset; font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink2); }
.rail .ev-c > time { flex: none; font-size: 12px; color: var(--muted); }
.rail .ev-c .thumb { width: 32px; height: 32px; border-radius: 4px; }
.rail .ev-c.fresh { animation: flash 1.6s ease; }
.rwake { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 8px; }
.rwake:hover { background: var(--hover); }
.rwake .ring { width: 32px; height: 32px; padding: 2.5px; }
.rwake .rt b { font-size: 13px; }
.rwake .meter { height: 3px; margin-top: 4px; }
.rwake .pct { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 32px; text-align: right; }
.rfoot { margin: 22px 4px 0; font-size: 11px; line-height: 17px; color: var(--muted2); }
.rfoot a:hover { text-decoration: underline; }
@media (max-height: 640px) { .rail .rfoot { display: none; } }

/* admin */
.adm { max-width: 780px; margin: 0 auto; padding: 32px 20px 0; }
.adm h1 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.adm-tok { display: flex; gap: 8px; margin: 14px 0 6px; }
.adm-tok input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 0 12px; height: 36px; outline: none; }
.adm-w { display: grid; gap: 8px; }
.adm-w > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.adm-w b { font-weight: 800; min-width: 80px; }
.adm-w span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink2); }
.adm-w em { font-style: normal; font-weight: 800; }
.adm-checks li.ok svg.i { color: #0ca30c; }
.adm-checks li.no svg.i { color: var(--red); }
.adm-checks small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.adm-pre { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--btn2); white-space: pre-wrap; font-size: 12px; }
.adm-list { display: flex; flex-direction: column; gap: 8px; }
.adm-a { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.adm-a .ring { width: 40px; height: 40px; }
.adm-a .ring .av { width: 100%; height: 100%; }
.adm-a .rt { min-width: 140px; }
.adm-s { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* =====================================================================
   Round 9: influ brand, bigger profile header, thoughts console,
   candlestick chart, creative create flow, paid first reel
   ===================================================================== */
/* brand: mark + wordmark together */
.sb-brand { gap: 10px; }
.sb-brand .logo-mark { display: block; width: 30px; height: 30px; }
.mbrand { display: flex; align-items: center; gap: 8px; }
.mbrand .logo-mark { width: 28px; height: 28px; }

/* pinned post + feed divider */

/* profile header: bigger, bolder numbers and name */
.ph-stats { gap: 40px; font-size: 16px; line-height: 22px; color: var(--ink2); }
.ph-stats b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-right: 2px; font-variant-numeric: tabular-nums; }
.ph-bio .nm { font-size: 17px; line-height: 22px; font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 767px) {
  .ph-stats { font-size: 13px; line-height: 17px; }
  .ph-stats b { font-size: 19px; line-height: 24px; margin-right: 0; }
  .ph-bio .nm { font-size: 16px; }
}

/* reels: real video when there is one; the demo's paid reel gets a slow push-in */
.m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m.kb img { animation: kbr 9s ease-in-out infinite alternate; }
@keyframes kbr { from { transform: scale(1); } to { transform: scale(1.12) translateY(-2%); } }

/* first reel rendering tile */
.tile.rendering { display: grid; place-items: center; background: #111827; color: #fff; }
.tile.rendering img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.5); transform: scale(1.2); }
.tile.rendering::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%); background-size: 200% 100%; animation: sk 1.6s linear infinite; }
.rd { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.rd i { width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .9s linear infinite; }
.rd b { font-size: clamp(12px, 7cqw, 15px); font-weight: 800; }
.rd small { font-size: clamp(11px, 5.5cqw, 13px); opacity: .8; }

/* thoughts console */
.mind { margin-bottom: 12px; padding: 12px 14px 14px; border-radius: 14px; background: #0d0f14; color: #e6e8ee; border: 1px solid transparent; }
:root[data-theme="dark"] .mind { background: #111318; border-color: #262626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mind { background: #111318; border-color: #262626; } }
.mind-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mind-h b { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 800; color: #fff; }
.mind-h svg.i { width: 18px; height: 18px; }
.mind .spill { background: rgba(255, 255, 255, .09); color: #d4d7de; }
.mind-log { max-height: 150px; overflow-y: auto; padding-top: 4px; font: 12.5px/18px ui-monospace, "SF Mono", Menlo, Consolas, monospace; scrollbar-width: thin; scrollbar-color: #374151 transparent; -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); }
.mind-log p { display: flex; gap: 10px; padding: 2px 0; }
.mind-log time { flex: none; width: 30px; text-align: right; color: #6b7280; }
.mind-log span { color: #b8bcc6; overflow-wrap: anywhere; }
.mind-log .now time { color: #34d399; }
.mind-log .now span { color: #fff; }
.mind-log .fresh { animation: thought .45s ease; }
@keyframes thought { from { opacity: 0; transform: translateY(6px); } }
.caret { display: inline-block; width: 7px; height: 13px; margin-left: 4px; vertical-align: -2px; background: #34d399; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mind-m { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #9ca3af; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mind-m .mlogo { width: 20px; height: 20px; border-radius: 5px; }
.mind-log .now time { font-weight: 800; }

/* candlestick chart */
.coin-id { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.coin-id b { font-weight: 800; font-size: 15px; }
.coin-id span { color: var(--muted); font-size: 12px; font-weight: 600; }
.ohlc { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ohlc b { color: var(--ink2); font-weight: 700; }
.ohlc b.up { color: #16a34a; }
.ohlc b.down { color: var(--red); }
.tv { height: 300px; }

/* create: identity */
.inrow { display: flex; gap: 8px; }
.inrow input { flex: 1; min-width: 0; }
.dice { flex: none; width: 44px; border-radius: 8px; background: var(--btn2); font-size: 19px; transition: background .15s; }
.dice:hover { background: var(--btn2-h); }
.dice.roll { animation: roll .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes roll { from { transform: rotate(-200deg) scale(.7); } }
.tick.handle input { text-transform: none; letter-spacing: 0; }
.fmsg { margin-top: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.fmsg:empty { display: none; }
.fmsg.ok { color: #16a34a; }
.fmsg.bad { color: var(--red); }
.fmsg b { color: var(--ink2); }
.ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ideas button { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink2); transition: background .15s, transform .15s; }
.ideas button:hover { background: var(--hover); transform: translateY(-1px); }
.ideas .spark { border: 1.5px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--ig) border-box; font-weight: 700; color: var(--ink); }
.ideas .spark:hover { background: linear-gradient(var(--hover), var(--hover)) padding-box, var(--ig) border-box; }
.field textarea.flash { animation: taflash .7s ease; }
@keyframes taflash { from { border-color: #0058d6; box-shadow: 0 0 0 3px rgba(0, 88, 214, .15); } }

/* create: persona */
.pills.emo button { display: inline-flex; align-items: center; gap: 6px; }
.pills.emo button i { font-style: normal; font-size: 14px; }
.pills button[hidden] { display: none; }
.pills button.more { background: transparent; border: 1px dashed var(--line); color: var(--muted); text-transform: none; }
.pills button.more:hover { background: var(--hover); color: var(--ink); }
.vprev { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--elev); }
.vprev.pop { animation: vpop .35s ease; }
@keyframes vpop { from { transform: scale(.98); opacity: .6; } }
.vp-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vp-k { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vp-shuffle { width: 30px; height: 30px; border-radius: 50%; background: var(--btn2); font-size: 14px; transition: background .15s, transform .2s; }
.vp-shuffle:hover { background: var(--btn2-h); transform: rotate(-12deg); }
.vp-post { display: flex; gap: 10px; align-items: flex-start; }
.vp-av { flex: none; }
.vp-av .av { width: 32px; height: 32px; }
.vp-post p { line-height: 19px; overflow-wrap: anywhere; }
.vp-post b { font-weight: 700; margin-right: 2px; }
.vp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vp-tags span { padding: 3px 10px; border-radius: 999px; background: var(--btn2); font-size: 12px; font-weight: 600; }

/* create: dev buy stepper */
.stepper { display: flex; align-items: stretch; height: 50px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); transition: border-color .15s; }
.stepper:focus-within { border-color: var(--muted2); }
.stepper button { width: 56px; flex: none; font-size: 24px; font-weight: 500; color: var(--ink); transition: background .15s; }
.stepper button:hover:not(:disabled) { background: var(--hover); }
.stepper button:active:not(:disabled) { background: var(--btn2); }
.stepper button:disabled { color: var(--muted2); cursor: default; }
.field .st-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; border-inline: 1px solid var(--line); cursor: text; }
.field .st-mid input { width: 96px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: right; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-mid span { font-weight: 700; color: var(--muted); }

/* create: paid first reel + what you pay now */
.frc { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.frc input { position: absolute; opacity: 0; pointer-events: none; }
.frc:has(input:focus-visible) { outline: 2px solid #0058d6; outline-offset: 2px; }
.frc-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--btn2); transition: background .2s; }
.frc-tx b { display: block; font-weight: 700; }
.frc-tx small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 16px; }
.frc-p { font-weight: 800; font-variant-numeric: tabular-nums; }
.sw { position: relative; width: 42px; height: 26px; border-radius: 13px; background: var(--btn2-h); transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s cubic-bezier(.3, 1.3, .5, 1); }
.frc.on { border-color: #0058d6; background: rgba(0, 88, 214, .05); }
.frc.on .frc-ic { background: var(--ig); }
.frc.on .sw { background: #0058d6; }
.frc.on .sw::after { transform: translateX(16px); }
.paynow { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.pn-h { margin-bottom: 6px; font-weight: 700; }
.pn-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.pn-row.tot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-weight: 800; color: var(--ink); }
.pn-row small { margin-left: 4px; color: var(--muted); font-weight: 600; }

/* =====================================================================
   Round 10: hero banner + in-feed cards, Instagram-style phone top bar,
   default profile pictures, Helvetica Neue
   ===================================================================== */
h1, h2, h3, .btn, .cr-go { letter-spacing: -.01em; }

/* default profile pictures (generated gradient silhouettes) */
.hav { background: var(--btn2); }
.sbub.me .av { padding: 0; overflow: hidden; }
.sbub.me .av .hav { width: 100%; height: 100%; }

/* phone top bar: launch · logo · activity */
@media (max-width: 767px) {
  .mtop { display: grid; grid-template-columns: 48px 1fr 48px; padding: 0 4px; }
  .mtop > .ib { display: grid; place-items: center; width: 48px; height: 48px; }
  .mtop .mbrand { justify-self: center; gap: 7px; }
  .mtop .mbrand .logo-mark { width: 26px; height: 26px; }
  .mtop .nav-ic { position: relative; display: grid; }
}

/* hero banner */
.hero-wrap { max-width: 630px; margin: 22px auto 0; padding: 0 16px; }
.hero-wrap[hidden] { display: none; }
@media (min-width: 1160px) { .hero-wrap { max-width: calc(630px + 64px + 319px); } }
.hero { position: relative; border-radius: 20px; overflow: hidden; background: #0b0b0f; color: #fff; isolation: isolate; }
:root[data-theme="dark"] .hero { box-shadow: inset 0 0 0 1px #262626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { box-shadow: inset 0 0 0 1px #262626; } }
.hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.hero-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.hero-dots button { width: 6px; height: 6px; padding: 0; border-radius: 3px; background: var(--line); transition: width .3s ease, background .3s ease; }
.hero-dots button.on { width: 18px; background: var(--ink); }
.hero-arrow { position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s, background .15s; }
.hero-arrow svg.i { width: 18px; height: 18px; stroke-width: 2.4; }
.hero-arrow:hover { background: rgba(255, 255, 255, .26); }
.hero-arrow.prev { left: 12px; }
.hero-arrow.next { right: 12px; }
@media (hover: hover) { .hero:hover .hero-arrow { opacity: 1; } }

/* one slide (shared by the banner and the in-feed cards) */
.hs { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; height: 260px; padding: 28px 40px; overflow: hidden; isolation: isolate; color: #fff; background: #0b0b0f; }
.hs::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.hs-launch::before { background: radial-gradient(60% 90% at 88% 20%, rgba(255, 0, 105, .55), transparent 70%), radial-gradient(50% 80% at 70% 110%, rgba(118, 56, 250, .6), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(255, 122, 0, .45), transparent 70%); }
.hs-upload::before { background: radial-gradient(60% 90% at 85% 15%, rgba(79, 91, 213, .6), transparent 70%), radial-gradient(50% 80% at 75% 110%, rgba(0, 149, 246, .45), transparent 70%); }
.hs-persona::before { background: radial-gradient(60% 90% at 85% 15%, rgba(255, 0, 105, .5), transparent 70%), radial-gradient(50% 80% at 75% 110%, rgba(255, 122, 0, .45), transparent 70%); }
.hs-ship::before { background: radial-gradient(60% 90% at 85% 15%, rgba(0, 149, 246, .5), transparent 70%), radial-gradient(50% 80% at 75% 110%, rgba(118, 56, 250, .5), transparent 70%); }
.hs-fees::before { background: radial-gradient(60% 90% at 85% 15%, rgba(211, 0, 197, .5), transparent 70%), radial-gradient(50% 80% at 75% 110%, rgba(255, 122, 0, .45), transparent 70%); }
.hs-think::before { background: radial-gradient(60% 90% at 85% 15%, rgba(118, 56, 250, .55), transparent 70%), radial-gradient(50% 80% at 75% 110%, rgba(255, 0, 105, .45), transparent 70%); }
.hs-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hs-pill { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 600; }
.hs h2 { margin: 12px 0 8px; font-size: 30px; line-height: 1.04; font-weight: 800; letter-spacing: -.04em; }
.hs h2.hs-hero { font-size: 42px; letter-spacing: -.045em; }
.hs h2 em { font-style: normal; background: linear-gradient(90deg, #ffb36b, #ff4f8b 45%, #b28cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs p { max-width: 42ch; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 21px; }
.hs-k { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hs-k b { padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: #fff; letter-spacing: .04em; }
.hs-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hs-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; transition: transform .15s, background .15s; }
.hs-btn:hover { transform: translateY(-1px); }
.hs-btn.sm { height: 34px; padding: 0 14px; font-size: 13px; background: rgba(255, 255, 255, .14); color: #fff; }
.hs-btn.sm:hover { background: rgba(255, 255, 255, .24); }
.hs-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: background .15s; }
.hs-ghost:hover { background: rgba(255, 255, 255, .08); }
.hs-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; color: rgba(255, 255, 255, .7); font-size: 12px; }
.hs-stats b { color: #fff; font-weight: 700; }
.hs-art { position: relative; z-index: 0; display: grid; place-items: center; height: 100%; min-width: 0; }
.hs .hstack { position: absolute; inset: -8px 0 -24px; margin: 0; min-height: 0; }
.hs .hcard { width: 31%; border-width: 3px; }
.hs-icon { display: grid; place-items: center; width: 168px; height: 168px; border-radius: 44px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.hs-icon svg.i { width: 84px; height: 84px; stroke-width: 1.4; }
.hs-plats { display: flex; gap: 12px; }
.hs-plats svg.i { width: 68px; height: 68px; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

@media (max-width: 767px) {
  .hero-wrap { margin: 12px auto 0; padding: 0 12px; }
  .hero { border-radius: 16px; }
  .hero .hs { grid-template-columns: 1fr; height: 224px; padding: 22px 20px; }
  .hero .hs h2 { font-size: 24px; }
  .hero .hs h2.hs-hero { font-size: 31px; }
  .hero .hs p { font-size: 14px; line-height: 19px; }
  .hero .hs-art { position: absolute; right: -28px; bottom: -28px; width: 60%; height: 80%; opacity: .35; pointer-events: none; }
  .hero .hs-launch .hs-art { display: none; }
  .hero .hs-icon { width: 150px; height: 150px; background: none; box-shadow: none; }
  .hero .hs-plats { display: none; }
  .hero-dots { margin-top: 8px; }
  .home { padding-top: 0; }
}

/* in-feed version: an Instagram-style ad card */
.promo-m { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px 4px 0 0; container-type: inline-size; }
.promo-m .hs { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0; height: 100%; padding: 8cqw 7cqw 7cqw; }
.promo-m .hs h2 { font-size: clamp(24px, 8cqw, 36px); }
.promo-m .hs h2.hs-hero { font-size: clamp(30px, 10.5cqw, 46px); }
.promo-m .hs p { font-size: clamp(14px, 3.6cqw, 16px); line-height: 1.4; }
.promo-m .hs-art { place-items: end; }
.promo-m .hs .hstack { inset: 0; }
.promo-m .hs .hcard { width: 36%; }
.promo-m .hs-icon { width: 44cqw; height: 44cqw; border-radius: 12cqw; }
.promo-m .hs-icon svg.i { width: 22cqw; height: 22cqw; }
.promo-m .hs-cta { display: none; }
.promo-cta { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 14px; border-radius: 0 0 4px 4px; background: #0058d6; color: #fff; font-weight: 700; transition: background .15s; }
.promo-cta:hover { background: #0047b3; }
.promo-cta svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
.promo .cap { margin-top: 10px; }

/* stories tray: never a half-cut bubble against the right column; fade + arrows like Instagram desktop */
.stories-wrap { position: relative; }
.st-nav { position: absolute; top: 31px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--elev); color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, .22); transition: transform .15s; }
.st-nav:hover { transform: scale(1.08); }
.st-nav svg.i { width: 16px; height: 16px; stroke-width: 2.6; }
.st-nav.prev { left: 4px; }
.st-nav.next { right: 4px; }
.st-nav[hidden] { display: none; }
@media (min-width: 768px) {
  .stories.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
  .stories.more-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 72px); mask-image: linear-gradient(to right, transparent, #000 72px); }
  .stories.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent); }
}
@media (max-width: 767px) { .st-nav { display: none; } }

/* the Launch bubble is the same size as everyone else's photo */
.sbub.me .ring { padding: 4px; }
.sbub.me .ring > .av { box-shadow: none; }

/* brand from js/brands.js: wordmark font + app-icon tiles that read in both themes */
.wordmark { font-family: var(--brand-font, var(--sans)); font-weight: var(--brand-weight, 800); letter-spacing: var(--brand-track, -.055em); }
:root[data-theme="dark"] { --tile-ink: #1c1c22; --tile-line: rgba(255, 255, 255, .14); --tile-paper-line: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tile-ink: #1c1c22; --tile-line: rgba(255, 255, 255, .14); --tile-paper-line: transparent; } }

/* =====================================================================
   Instagram import: link a public account at launch, its posts sync in
   ===================================================================== */
/* create: step 1 option */
.igimp { margin-bottom: 4px; padding: 14px; border-radius: 16px; border: 1.5px solid transparent; background: linear-gradient(var(--elev), var(--elev)) padding-box, linear-gradient(45deg, #fdf497, #fd5949 45%, #d6249f 60%, #285aeb) border-box; }
.cr:not([data-step="0"]) .igimp, .cr:not([data-step="0"]) .igimp-or { display: none; }
.igimp-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.igimp-h .hic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.igimp-h .hic svg.i { width: 20px; height: 20px; }
.igimp-h b { display: block; font-weight: 700; }
.igimp-h span { color: var(--muted); font-size: 13px; line-height: 17px; }
.igimp-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.igimp-or::before, .igimp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.igrow { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: border-color .15s; }
.igrow:focus-within { border-color: var(--muted2); }
.igrow .hic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.igrow .hic svg.i { width: 16px; height: 16px; }
.igrow .at { color: var(--muted); }
.igrow input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 6px 0; font: inherit; color: var(--ink); }
.igp { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--elev); }
.igp.on { border-color: #0058d6; box-shadow: 0 0 0 1px #0058d6; }
.igp.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; }
.igp-h { display: flex; align-items: center; gap: 12px; }
.igp-av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--btn2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #d6249f; }
.igp-h b { display: block; font-weight: 700; }
.igp-h span { color: var(--muted); font-size: 13px; }
.igp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin-top: 12px; border-radius: 8px; overflow: hidden; }
.igp-t { position: relative; aspect-ratio: 1; background: var(--btn2); }
.igp-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igp-t svg.i { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.igp-note { margin-top: 10px; color: var(--ink2); font-size: 12px; line-height: 17px; }
.igp-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.igp-ok { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; color: #16a34a; font-weight: 700; font-size: 13px; }
.igp-ok svg.i { width: 16px; height: 16px; stroke-width: 2.6; }
.pv-ig { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--btn2); font-size: 12px; color: var(--ink2); }
.pv-ig svg.i { width: 16px; height: 16px; flex: none; color: #d6249f; }

/* profile: linked account row */
.ig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.igchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 999px; background: var(--btn2); font-size: 13px; color: var(--ink2); transition: background .15s; }
.igchip:hover { background: var(--btn2-h); }
.igchip svg.i { width: 18px; height: 18px; padding: 2px; border-radius: 6px; color: #fff; background: linear-gradient(45deg, #fdf497, #fd5949 45%, #d6249f 60%, #285aeb); }
.igchip b { font-weight: 700; color: var(--ink); }
.igv { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.igv.ok { color: #16a34a; }
.igv svg.i { width: 14px; height: 14px; stroke-width: 2.8; }
.ig-row .lnk { font-size: 12px; font-weight: 700; color: var(--blue); }

/* feed + post viewer */
.slot.ig { display: inline-flex; align-items: center; gap: 4px; color: #d6249f; }
.slot.ig svg.i { width: 13px; height: 13px; }
.ig-src { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; }
.ig-src:hover { color: var(--ink); }
.ig-src svg.i { width: 12px; height: 12px; }

/* Instagram owner rewards */
.ig-reward { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; font-size: 13px; color: var(--ink2); background: color-mix(in srgb, #16a34a 10%, transparent); }
.ig-reward svg.i { width: 18px; height: 18px; flex: none; color: #16a34a; }
.ig-reward b { color: var(--ink); font-weight: 800; }
.ig-row .btn.sm { height: 30px; }
.igcode { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--btn2); }
.igcode code { font: 700 17px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; color: var(--ink); }
.kv small { color: var(--muted); font-weight: 600; margin-left: 4px; }

/* banner controls sit under the banner (‹ dots ›), never on top of its text */
.hero-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.hero-nav .hero-dots { margin-top: 0; }
.hero-nav .hero-arrow { position: static; width: 28px; height: 28px; margin: 0; opacity: 1; color: var(--ink); background: var(--btn2); backdrop-filter: none; }
.hero-nav .hero-arrow:hover { background: var(--btn2-h); }
.hero-nav .hero-arrow svg.i { width: 15px; height: 15px; }

/* =====================================================================
   How it works, redesigned
   ===================================================================== */
.how { max-width: 860px; }
.hw-hero { position: relative; overflow: hidden; isolation: isolate; padding: 36px 36px 30px; border-radius: 24px; color: #fff; background: #0b0b0f; }
.hw-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 92% 10%, rgba(255, 0, 105, .5), transparent 70%), radial-gradient(55% 80% at 70% 120%, rgba(118, 56, 250, .55), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(255, 122, 0, .4), transparent 70%); }
:root[data-theme="dark"] .hw-hero, :root[data-theme="dark"] .hw-end { box-shadow: inset 0 0 0 1px #262626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hw-hero, :root:not([data-theme="light"]) .hw-end { box-shadow: inset 0 0 0 1px #262626; } }
.hw-hero h1 { margin: 14px 0 12px; font-size: clamp(32px, 5.6vw, 50px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; }
.hw-hero h1 em, .hw-end h2 em { font-style: normal; background: linear-gradient(90deg, #ffb36b, #ff4f8b 45%, #b28cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hw-hero > p { max-width: 56ch; color: rgba(255, 255, 255, .8); font-size: 16px; line-height: 24px; }
.hw-hero .hs-cta { margin-top: 20px; }
.hw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.hw-kpi { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hw-kpi b { display: block; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hw-kpi span { color: rgba(255, 255, 255, .65); font-size: 12px; font-weight: 600; }

.hw-toc { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; margin: 14px -4px 0; padding: 10px 4px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); scrollbar-width: none; }
.hw-toc::-webkit-scrollbar { display: none; }
.hw-toc button { flex: none; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--btn2); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s; }
.hw-toc button:hover { background: var(--btn2-h); }
.how .hsec { scroll-margin-top: 64px; }
.how .hsec .eyebrow { display: inline-block; margin-bottom: 6px; }
.how .hsec h2 { font-size: 26px; line-height: 32px; letter-spacing: -.025em; }
.hw-h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }

/* the loop */
.fly { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 18px; }
.fly-wheel { position: relative; width: 280px; height: 280px; }
.fly-wheel::before { content: ""; position: absolute; inset: 34px; border-radius: 50%; border: 2px dashed var(--line); }
.fly-wheel::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--ig); box-shadow: 0 0 0 4px color-mix(in srgb, #ff0069 18%, transparent); animation: orbit 7s linear infinite; }
@keyframes orbit { from { transform: rotate(-90deg) translateX(106px); } to { transform: rotate(270deg) translateX(106px); } }
@media (prefers-reduced-motion: reduce) { .fly-wheel::after { animation: none; transform: rotate(-45deg) translateX(106px); } }
.fly-node { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--elev); box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(0, 0, 0, .08); font-size: 13px; font-weight: 700; white-space: nowrap; }
.fly-node svg.i { width: 18px; height: 18px; color: #d6249f; }
.fly-node.n1 { top: 18px; left: 50%; transform: translateX(-50%); }
.fly-node.n2 { top: 50%; right: -8px; transform: translateY(-50%); }
.fly-node.n3 { bottom: 18px; left: 50%; transform: translateX(-50%); }
.fly-node.n4 { top: 50%; left: -8px; transform: translateY(-50%); }
.fly-core { position: absolute; inset: 92px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--btn2); }
.fly-core b { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.fly-core small { font-size: 10px; line-height: 13px; color: var(--muted); }
.fly-steps { list-style: none; counter-reset: fs; display: grid; gap: 14px; }
.fly-steps li { counter-increment: fs; position: relative; padding-left: 42px; }
.fly-steps li::before { content: counter(fs); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 800; }
.fly-steps b { display: block; font-weight: 800; }
.fly-steps p { color: var(--ink2); font-size: 14px; line-height: 20px; }

/* two ways to launch */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.path { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--elev); }
.path.ig { border: 1.5px solid transparent; background: linear-gradient(var(--elev), var(--elev)) padding-box, linear-gradient(45deg, #fdf497, #fd5949 45%, #d6249f 60%, #285aeb) border-box; }
.path-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--btn2); color: var(--ink); }
.path-ic.hic.ig { color: #fff; }
.path-ic svg.i { width: 22px; height: 22px; }
.path h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.path ul { list-style: none; display: grid; gap: 8px; flex: 1; }
.path li { position: relative; padding-left: 18px; color: var(--ink2); font-size: 14px; line-height: 20px; }
.path li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ig); }
.path li b { color: var(--ink); }
.path .btn { align-self: flex-start; }

/* fees */
.hw-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #d6249f 8%, transparent); font-size: 13px; line-height: 19px; color: var(--ink2); }
.hw-note svg.i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #d6249f; }
.hw-note b { color: var(--ink); }

/* what the AI does */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.cap-c { padding: 16px; border-radius: 16px; border: 1px solid var(--line); }
.cap-c svg.i { width: 36px; height: 36px; padding: 8px; border-radius: 10px; color: #fff; background: linear-gradient(45deg, #fd5949, #d6249f 60%, #7638fa); }
.cap-c b { display: block; margin: 12px 0 4px; font-weight: 800; }
.cap-c p { color: var(--ink2); font-size: 13px; line-height: 18px; }

/* Instagram owners */
.owner-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.owner-steps li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; background: var(--btn2); }
.os-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; color: #fff; font-weight: 800; background: linear-gradient(45deg, #fd5949, #d6249f 60%, #285aeb); }
.owner-steps b { font-weight: 800; }
.owner-steps p { color: var(--ink2); font-size: 13px; line-height: 18px; }
.os-bio { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px; border-radius: 12px; background: var(--elev); box-shadow: 0 0 0 1px var(--line); }
.os-av { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ig); box-shadow: 0 0 0 2px var(--elev), 0 0 0 3.5px #d6249f; }
.os-bio b { display: block; font-size: 12px; }
.os-bio code { font: 700 13px ui-monospace, "SF Mono", Menlo, monospace; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, #d6249f 14%, transparent); color: #d6249f; }

/* models */
.hw-logos { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.hw-logo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); }
.hw-logo small { font-size: 12px; font-weight: 600; color: var(--ink2); }
.hw-more { margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; }
.hw-more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; font-weight: 700; }
.hw-more summary::-webkit-details-marker { display: none; }
.hw-more summary svg.i { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.hw-more[open] summary svg.i { transform: rotate(180deg); }
.hw-more > :not(summary) { margin-left: 14px; margin-right: 14px; }
.hw-more .fine { margin-bottom: 10px; }

/* guardrails */
.guards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.guards li { padding: 16px; border-radius: 16px; border: 1px solid var(--line); }
.guards svg.i { width: 22px; height: 22px; color: #16a34a; }
.guards b { display: block; margin: 10px 0 4px; font-weight: 800; }
.guards p { color: var(--ink2); font-size: 13px; line-height: 18px; }

/* closing call to action */
.hw-end { position: relative; overflow: hidden; isolation: isolate; margin: 26px 0 40px; padding: 34px 28px; border-radius: 24px; text-align: center; color: #fff; background: #0b0b0f; }
.hw-end::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 50% 120%, rgba(214, 36, 159, .55), transparent 70%), radial-gradient(40% 80% at 100% 0%, rgba(40, 90, 235, .45), transparent 70%); }
.hw-end h2 { font-size: clamp(26px, 4.4vw, 36px); line-height: 1.08; font-weight: 800; letter-spacing: -.04em; }
.hw-end .hs-cta { justify-content: center; margin-top: 18px; }

@media (max-width: 767px) {
  .how { padding: 12px 12px 0; }
  .hw-hero { padding: 26px 20px 22px; border-radius: 20px; }
  .hw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-toc { top: 56px; }
  .how .hsec { scroll-margin-top: 112px; }
  .how .hsec h2 { font-size: 22px; line-height: 28px; }
  .fly { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .fly-steps { justify-self: stretch; }
  .paths, .owner-steps { grid-template-columns: minmax(0, 1fr); }
  .caps, .guards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-end { margin-bottom: 24px; }
}
@media (max-width: 420px) { .caps, .guards { grid-template-columns: minmax(0, 1fr); } }
/* flywheel: nodes sit centered on the ring, the core is small enough not to touch them */
.fly { grid-template-columns: 300px minmax(0, 1fr); }
.fly-wheel { width: 300px; height: 300px; }
.fly-wheel::before { inset: 40px; }
.fly-node.n1 { top: 40px; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.fly-node.n2 { top: 50%; right: 40px; left: auto; bottom: auto; transform: translate(50%, -50%); }
.fly-node.n3 { bottom: 40px; left: 50%; top: auto; right: auto; transform: translate(-50%, 50%); }
.fly-node.n4 { top: 50%; left: 40px; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.fly-core { inset: 108px; }
.fly-core small { display: none; }
@keyframes orbit { from { transform: rotate(-90deg) translateX(110px); } to { transform: rotate(270deg) translateX(110px); } }
.path ul { align-content: start; }

/* where fees go: switch between the two kinds of coin */
.wf-mode { margin: 14px 0 4px; }
.wf-lead { margin-top: 10px; }

/* How it works, one visual system: every card, icon chip and step number shares the same treatment */
.how { --hw-pink: #d6249f; --hw-grad: linear-gradient(45deg, #fd5949, #d6249f 60%, #7638fa); --hw-chip: color-mix(in srgb, #d6249f 10%, transparent); }
.how .path, .how .cap-c, .how .owner-steps li, .how .guards li, .how .calc, .how .hw-more { border: 1px solid var(--line); border-radius: 18px; background: var(--elev); }
.how .path.ig { border: 1.5px solid transparent; background: linear-gradient(var(--elev), var(--elev)) padding-box, linear-gradient(45deg, #fdf497, #fd5949 45%, #d6249f 60%, #285aeb) border-box; }
.how .path-ic { display: grid; place-items: center; }
.how .cap-c, .how .guards li, .how .owner-steps li { padding: 18px; }
.how .rung, .how .tbl-wrap { border-radius: 14px; }
/* icon chips */
.how .path-ic, .how .cap-c svg.i, .how .guards svg.i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--hw-pink); background: var(--hw-chip); }
.how .path-ic.hic.ig { color: #fff; background: linear-gradient(45deg, #ffd600, #ff7a00, #ff0069, #d300c5); }
.how .cap-c b, .how .guards b { margin: 12px 0 4px; font-size: 15px; }
.how .cap-c p, .how .guards p, .how .owner-steps p { font-size: 13.5px; line-height: 19px; }
.how .limits li svg.i { color: var(--hw-pink); }
/* step numbers */
.how .fly-steps li::before, .how .os-n { width: 28px; height: 28px; font-size: 13px; color: #fff; background: var(--hw-grad); }
.how .os-n { margin-bottom: 6px; }
.how .os-bio { background: var(--bg); }
.how .faq .eyebrow { display: inline-block; margin-bottom: 6px; }

/* the loop: a dot rides the ring between nodes; the node it reaches lights up with its step */
.fly-wheel::after { content: none; }
.fly-dot { position: absolute; left: 0; top: 0; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ig); box-shadow: 0 0 0 4px color-mix(in srgb, #ff0069 18%, transparent); opacity: 0; transition: opacity .12s; pointer-events: none; }
.fly-dot.show { opacity: 1; }
.fly-node { z-index: 2; cursor: default; transition: box-shadow .25s, scale .25s, color .25s; }
.fly-node.on { scale: 1.06; box-shadow: 0 0 0 2px var(--hw-pink), 0 10px 24px color-mix(in srgb, #d6249f 26%, transparent); }
.fly-node.hit { animation: flyHit .5s ease-out; }
@keyframes flyHit { 0% { box-shadow: 0 0 0 2px var(--hw-pink), 0 0 0 0 color-mix(in srgb, #d6249f 45%, transparent); } 100% { box-shadow: 0 0 0 2px var(--hw-pink), 0 0 0 14px transparent; } }
.fly-steps li { padding: 6px 8px 6px 46px; margin-left: -8px; border-radius: 12px; transition: opacity .3s, background .3s; }
.fly-steps li::before { top: 6px; left: 8px; }
.fly.anim .fly-steps li { opacity: .45; }
.fly.anim .fly-steps li.on { opacity: 1; background: var(--hw-chip); }
@media (prefers-reduced-motion: reduce) { .fly-dot { display: none; } .fly-node, .fly-steps li { transition: none; } }
/* phones: wheel on top, steps below (overrides the fixed two-column layout above) */
@media (max-width: 767px) {
  .fly { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
  .fly-steps { justify-self: stretch; }
}

/* speaker toggle on videos */
.snd { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.snd svg.i { width: 16px; height: 16px; }
.snd:hover { background: rgba(0, 0, 0, .7); }

/* Instagram reel we only have the cover of: link out to watch it */
.ig-watch { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 700; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.ig-watch svg.i { width: 16px; height: 16px; }
.ig-watch:hover { background: rgba(0, 0, 0, .72); }