/* iPhone reference pass. Values are logical CSS points on a 393 × 852 canvas. */
@font-face {
  font-family: 'TikTok Sans';
  src: url('/assets/fonts/TikTokSans-variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-app: 'TikTok Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ios: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.22, 1.3, .36, 1);
  --device-scale: 1;
  font-family: var(--font-app);
  font-optical-sizing: auto;
}

[hidden] { display: none !important; }
button { transition: opacity 100ms ease; }
button:active { opacity: .72; }
.device-stage {
  position: relative;
  width: calc(393px * var(--device-scale));
  height: calc(852px * var(--device-scale));
}
.device {
  --top: 59px;
  --nav: 49px;
  --bottom: 34px;
  width: 393px;
  height: 852px;
  min-height: 0;
  border-radius: 47px;
  transform: scale(var(--device-scale));
  transform-origin: top left;
}
.status-bar {
  font-family: var(--font-ios);
  padding: 0 28px 0 32px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.45px;
}
.clock, .status-icons { padding-top: 0; }
.dynamic-island { width: 126px; height: 37px; top: 11px; }
.home-zone { padding-bottom: 8px; }
.home-zone span, .full-overlay:after { width: 134px; height: 5px; }
.navigation { border-top-color: #ffffff20; }
.nav-item { gap: 3px; font-size: 10px; font-weight: 500; line-height: 12px; color: #fff; }
.nav-item .icon { width: 25px; height: 25px; }
.nav-item:active { opacity: .7; }
.nav-label { letter-spacing: .1px; }
.device.light .nav-item { color: #161823a6; }
.device.light .nav-item.active { color: #161823; font-weight: 600; }
.create-icon {
  width: 38px;
  height: 28px;
  border-radius: 7px;
  box-shadow: -5px 0 #25f4ee, 5px 0 #fe2c55;
}
.create-icon .icon { width: 23px; height: 23px; stroke-width: 2.2px; }
.nav-badge {
  top: 0;
  right: 15px;
  font-size: 10px;
  line-height: 13px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  font-weight: 500;
}

/* For You: heavier silhouettes, even vertical rhythm, readable metadata. */
.feed-header { height: 48px; gap: 20px; }
.feed-tab {
  padding: 10px 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0;
  color: #ffffffa8;
}
.feed-tab.selected:after { width: 24px; height: 3px; bottom: 3px; }
.top-live { top: 11px !important; left: 16px !important; }
.top-live .icon { width: 24px; height: 24px; stroke-width: 1.7px; }
.top-search { top: 10px !important; right: 14px !important; }
.top-search .icon { width: 27px; height: 27px; stroke-width: 2.2px; }
.right-rail { width: 52px; right: 5px; bottom: 66px; gap: 16px; }
.rail-avatar { width: 48px; height: 48px; margin-bottom: 9px; border-width: 1.5px; }
.follow-plus { width: 22px; height: 22px; bottom: -11px; }
.follow-plus .icon { width: 16px; height: 16px; stroke-width: 2.5px; }
.rail-button { gap: 5px; font-weight: 700; line-height: 16px; }
.rail-button .icon { width: 35px; height: 35px; }
.rail-button .icon-comment { width: 34px; height: 34px; }
.rail-button .icon-bookmark { width: 30px; height: 32px; }
.rail-button .icon-share { width: 34px; height: 32px; }
.rail-button>span { font-size: 12px; line-height: 16px; }
.rail-button:active { opacity: 1; }
.rail-button .icon { transition: transform 120ms ease; }
.rail-button.like-pop .icon { animation: like-bounce 360ms var(--ease-spring); }
.creator-name { font-size: 17px; font-weight: 700; letter-spacing: 0; margin-bottom: 7px; }
.video-info { left: 12px; right: 69px; bottom: 16px; }
.video-caption { font-size: 15px; line-height: 20px; font-weight: 400; margin-bottom: 9px; }
.sound { font-size: 13px; line-height: 18px; gap: 6px; max-width: 280px; }
.sound .icon { width: 14px; height: 14px; }
.disc { width: 40px; height: 40px; right: 12px; bottom: 13px; border-width: 5px; }
.disc .avatar { width: 24px; height: 24px; }
.mute-button { top: 62px; }
.pause-indicator { padding-bottom: 0; }
.pause-indicator .icon { width: 61px; height: 61px; }
.placeholder-content { padding: 0 45px 80px 16px; }
.placeholder-content h1 { font-size: 23px; font-weight: 600; letter-spacing: 0; }
.placeholder-content p { font-size: 13px; line-height: 19px; }
.demo-tag { top: 70px; left: 13px; font-size: 8px; }
.feed-nudge { bottom: 190px; font-size: 11px; }
.reel.tap-like:before { content: none; }
.double-tap-heart {
  position: absolute;
  z-index: 7;
  width: 105px;
  height: 105px;
  color: var(--red);
  pointer-events: none;
  filter: drop-shadow(0 2px 5px #0002);
  animation: double-heart 850ms ease-out forwards;
}
.double-tap-heart .icon { width: 100%; height: 100%; }

/* Profile: 96-point photo, separated stats, 44-point action buttons. */
.page-header { height: 44px; padding: 0 16px; }
.page-header h2 { position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - 135px); white-space: nowrap; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.page-header>.header-side:last-child { margin-left: auto; }
.header-side { gap: 20px; }
.header-side>button { min-width: 26px; min-height: 32px; display: grid; place-items: center; }
.header-side .icon { width: 25px; height: 25px; stroke-width: 1.9px; }
.profile-top { padding-top: 16px; }
.profile-avatar { margin-bottom: 12px; }
.profile-avatar>.avatar { width: 96px; height: 96px; }
.avatar-edit { width: 28px; height: 28px; right: -2px; bottom: -1px; background: #20c4cb; border-width: 3px; }
.avatar-edit .icon { width: 17px; height: 17px; stroke-width: 2px; }
.profile-handle { font-size: 17px; line-height: 22px; font-weight: 600; }
.profile-stats { gap: 0; margin: 20px auto 18px; width: 276px; }
.stat { width: 92px; position: relative; }
.stat+.stat:before { content: ''; position: absolute; left: 0; top: 13px; height: 19px; width: 1px; background: #f1f1f2; }
.stat strong { font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: 0; margin-bottom: 2px; }
.stat span { font-size: 13px; line-height: 18px; color: #16182380; }
.profile-actions { gap: 4px; margin: 0 30px; }
.profile-actions button { height: 44px; border-radius: 6px; padding: 0 13px; font-size: 14px; font-weight: 600; background: #f1f1f2; }
.profile-actions button.square { width: 44px; }
.profile-actions .icon { width: 21px; height: 21px; }
.profile-bio { font-size: 14px; line-height: 20px; padding: 16px 20px 20px; white-space: pre-line; }
.profile-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ink); text-decoration: none; }
.profile-link .icon { width: 14px; height: 14px; }
.profile-tabs { height: 45px; top: 44px; border-bottom-color: #f1f1f2; }
.profile-tabs button { color: #16182350; }
.profile-tabs button.selected { color: var(--ink); }
.profile-tabs button .icon { width: 23px; height: 23px; stroke-width: 1.7px; }
.profile-tabs button .icon-grid { width: 21px; height: 21px; }
.profile-tabs button.selected:after { width: 44px; height: 2px; }
.profile-grid { gap: 1px; }
.tile-views { font-size: 12px; line-height: 16px; bottom: 7px; left: 7px; }
.tile-views .icon { width: 14px; height: 14px; }
.pinned-badge { position: absolute; left: 5px; top: 6px; background: #fe2c55; color: #fff; border-radius: 2px; padding: 2px 4px; font-size: 10px; line-height: 14px; font-weight: 600; }
.screen[data-transition=push]>.white-screen { animation: ios-push 280ms var(--ease-ios); }

/* System photo picker uses iOS typography, not the TikTok UI font. */
.gallery { font-family: var(--font-ios); background: #fff; }
.gallery-top { height: 55px; flex: none; gap: 10px; padding: 6px 16px 11px; }
.gallery-top>.ios-blue { font-size: 16px; letter-spacing: -.25px; font-weight: 400; }
.gallery-tabs { margin: 0; flex: 1; max-width: 176px; padding: 2px; height: 32px; border-radius: 9px; background: #efeff0; }
.gallery-tabs button { font-family: var(--font-ios); font-size: 13px; height: 28px; font-weight: 500; letter-spacing: -.1px; color: #000; border-radius: 7px; }
.gallery-tabs button.selected { box-shadow: 0 1px 3px #0002, 0 0 0 .5px #00000005; }
.gallery-add { padding: 0; border-radius: 0; background: none; color: #007aff; font-family: var(--font-ios); font-weight: 600; font-size: 16px; letter-spacing: -.3px; }
.gallery-add:disabled { color: #8e8e93; opacity: .65; }
.gallery-search { padding: 0 16px 14px; flex: none; }
.gallery-search label { display: flex; align-items: center; gap: 7px; padding: 8px 9px; height: 36px; border-radius: 10px; background: #efeff0; color: #8e8e93; }
.gallery-search .icon { width: 18px; height: 18px; stroke-width: 2.2px; }
.gallery-search input { min-width: 0; flex: 1; border: 0; background: transparent; padding: 0; font-family: var(--font-ios); font-size: 16px; line-height: 20px; color: #000; letter-spacing: -.2px; }
.gallery-search input::placeholder { color: #8e8e93; opacity: 1; }
.gallery-grid { gap: 1px; }
.gallery-grid .grid-tile { aspect-ratio: 1; }
.selection-circle { top: auto; bottom: 7px; right: 7px; width: 22px; height: 22px; border: 1.5px solid #ffffffe5; background: #0000000a; box-shadow: 0 1px 2px #0003; }
.selection-circle .icon { width: 15px; height: 15px; stroke-width: 2.5px; }
.selected-tile .selection-circle { border: 1.5px solid #fff; background: #007aff; }
.selected-tile:after { border: 0; background: #ffffff18; }
.tile-duration { right: auto; left: 7px; bottom: 8px; font-family: var(--font-ios); font-size: 12px; font-weight: 500; }
.gallery-label { padding: 16px; font-size: 21px; font-family: var(--font-ios); font-weight: 700; letter-spacing: -.5px; }
.gallery-footer { min-height: 60px; padding: 12px 20px 4px; border-top-color: #e5e5ea; font-family: var(--font-ios); font-size: 11px; line-height: 16px; color: #8e8e93; }
.gallery-footer p { margin-top: 4px; }
.gallery-footer strong { color: #8e8e93; font-weight: 400; }
.gallery-footer .gallery-selection-count { font-size: 14px; color: #007aff; font-weight: 500; }
.gallery-library-heading { display: flex; padding: 6px 16px 16px; align-items: center; gap: 24px; font-family: var(--font-ios); font-size: 15px; }
.gallery-library-heading button { color: #007aff; }
.ios-albums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.ios-albums .album-row { padding: 0; display: block; }
.ios-albums .album-thumb { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; margin-bottom: 8px; }
.ios-albums .album-thumb .icon { width: 40px; height: 40px; }
.ios-albums .album-row strong { font-weight: 400; margin-bottom: 3px; }
.ios-albums .album-row small { font-size: 13px; }
.gallery-footer .draft-link { display: block; margin: 8px auto 0; font-size: 13px; }

/* Native-like presentation and dismissal; re-renders never replay entry. */
.scrim { animation: scrim-in 300ms ease both; }
.sheet { border-radius: 16px 16px 0 0; animation: modal-in 340ms var(--ease-ios); }
.sheet-grabber { width: 36px; height: 4px; margin-top: 7px; background: #d4d4d8; touch-action: none; }
.sheet-heading { font-size: 14px; padding: 17px 16px; touch-action: none; }
.sheet-close { top: 12px; right: 12px; }
.sheet-close .icon { width: 20px; height: 20px; }
.comments-sheet { height: 67%; max-height: 80%; }
.comment { padding: 13px 16px; gap: 11px; }
.comment .avatar { width: 36px; height: 36px; }
.comment-name { font-size: 12px; line-height: 16px; margin-bottom: 3px; font-weight: 500; }
.comment-content p { font-size: 14px; line-height: 20px; }
.comment-meta { font-size: 12px; line-height: 16px; margin-top: 6px; }
.comment-form { padding: 11px 12px; }
.comment-form input { font-size: 14px; padding: 11px 13px; }
.full-overlay { animation: modal-in 360ms var(--ease-ios); }
#overlay[data-kind=search] .full-overlay, #overlay[data-kind=compose] .full-overlay { animation: ios-push 280ms var(--ease-ios); }
#overlay[data-motion=none] .full-overlay, #overlay[data-motion=none] .sheet, #overlay[data-motion=none] .scrim { animation: none; }
#overlay.closing .sheet, #overlay.closing .full-overlay { animation: modal-out 220ms cubic-bezier(.4, 0, 1, 1) forwards !important; }
#overlay.closing .scrim { animation: scrim-out 220ms ease forwards !important; }
#overlay.closing { pointer-events: none; }
#overlay.closing>* { pointer-events: none; }
.share-circle { width: 56px; height: 56px; }
.share-option { font-size: 12px; }
.sheet-cancel { font-size: 16px; font-weight: 500; background: #f5f5f5; }
.compose-top { min-height: 48px; padding: 4px 16px 12px; }
.compose-top h2 { font-size: 18px; }

@keyframes like-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(.75); }
  65% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes double-heart {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-18deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-18deg); }
  35%, 60% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-18deg); }
  100% { opacity: 0; transform: translate(-50%, -105%) scale(1.2) rotate(-18deg); }
}
@keyframes ios-push { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes modal-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes modal-out { from { transform: translateY(var(--dismiss-start, 0px)); } to { transform: translateY(100%); } }
@keyframes scrim-in { from { background: #0000; } to { background: #0007; } }
@keyframes scrim-out { from { background: #0007; } to { background: #0000; } }

@media (max-width: 650px) {
  .device-stage { width: 100%; height: 100dvh; }
  .device {
    --top: env(safe-area-inset-top, 0px);
    --bottom: env(safe-area-inset-bottom, 0px);
    width: 100%; height: 100dvh;
    transform: none; border-radius: 0;
  }
  .profile-avatar>.avatar { width: 96px; height: 96px; }
  .home-zone { padding: 0; }
}

@media (max-width: 360px) {
  .feed-header { gap: 14px; }
  .feed-tab { font-size: 16px; }
  .profile-actions { margin-inline: 20px; }
  .gallery-top { padding-inline: 12px; gap: 8px; }
  .gallery-tabs { max-width: 160px; }
  .gallery-top>.ios-blue, .gallery-add { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Photo Mode: horizontal pages retain the vertical feed position and soundtrack. */
.photo-reel { background: #080808; }
.photo-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.photo-track::-webkit-scrollbar, .preview-track::-webkit-scrollbar { display: none; }
.photo-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.photo-slide img, .photo-slide video { position: static; display: block; width: 100%; height: 100%; object-fit: contain; }
.photo-count { position: absolute; right: 12px; top: 108px; z-index: 3; padding: 4px 9px; border-radius: 12px; background: #0006; color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.photo-pagination { position: absolute; bottom: 13px; left: 70px; right: 70px; height: 20px; z-index: 4; display: flex; justify-content: center; align-items: center; gap: 4px; }
.photo-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffffff66; flex-shrink: 0; position: relative; }
.photo-dot:before { content: ''; position: absolute; inset: -7px -2px; }
.photo-dot.selected { background: #20d5ec; }
.photo-reel .video-info { bottom: 43px; }
.photo-reel .disc { bottom: 37px; }
.photo-reel .right-rail { bottom: 100px; }
.photo-hint { position: absolute; bottom: 181px; left: 12px; z-index: 3; display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px #0006; pointer-events: none; }
.photo-hint .icon { width: 13px; height: 13px; }
.reel:not([data-slide="0"]) .photo-hint { display: none; }
.photo-pagination:has(.photo-dot:nth-child(12)) { gap: 3px; }
.photo-pagination:has(.photo-dot:nth-child(12)) .photo-dot { width: 4px; height: 4px; }
.tile-photo-icon { position: absolute; top: 8px; right: 7px; color: #fff; filter: drop-shadow(0 1px 2px #0008); }
.tile-photo-icon .icon { width: 19px; height: 19px; }
.tile-duration { display: flex; gap: 3px; align-items: center; }
.tile-duration .icon { width: 13px; height: 13px; }
.compose-thumb img { width: 100%; height: 100%; object-fit: cover; }
.compose-photo-count { position: absolute; right: 4px; bottom: 5px; display: flex; align-items: center; gap: 3px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #0008; }
.compose-photo-count .icon { position: static; width: 14px; height: 14px; color: #fff; }
.compose-music > .icon { color: #fe2c55; }
.compose-music strong { max-width: 240px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.music-caption { color: #888; font-size: 13px; padding: 20px 18px 12px; }
.music-list { overflow-y: auto; }
.music-row { width: 100%; display: flex; align-items: center; gap: 13px; padding: 13px 18px; text-align: left; }
.music-art .avatar { width: 54px; height: 54px; border-radius: 6px; }
.music-details { flex: 1; min-width: 0; }
.music-details strong { display: block; font-size: 15px; margin-bottom: 7px; font-weight: 600; }
.music-details small { color: #888; font-size: 13px; }
.music-row > .icon { width: 21px; height: 21px; color: #fe2c55; }
.post-preview { overflow: hidden; }
.preview-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; background: #080808; }
.preview-slide { flex: 0 0 100%; height: 100%; min-width: 0; scroll-snap-align: start; }
.preview-slide img, .preview-slide video { width: 100%; height: 100%; object-fit: contain; display: block; }
.preview-audio { display: flex; align-items: center; gap: 8px; padding: 15px; font-size: 13px; text-align: left; }
.preview-audio .icon { width: 18px; height: 18px; }
.preview-audio span { flex: 1; }
.preview-audio strong { color: #fe2c55; font-size: 12px; }
.preview-caption { font-size: 12px; color: #888; text-align: center; padding: 12px 16px 20px; }

/* Keep the meme cat's face readable even in small comment avatars. */
.avatar.cat { background: #080808; }
.avatar.cat img { flex: none; width: 150%; height: 150%; max-width: none; object-fit: cover; object-position: 50% 0; transform: translateY(8%); }

/* Profile tab changes retain the header, card layout and scroll position. */
.profile-screen { position: relative; overscroll-behavior-y: contain; overflow-anchor: none; }
.profile-screen .profile-tabs { display: grid; grid-template-columns: repeat(var(--profile-tab-count),minmax(0,1fr)); }
.profile-screen .profile-tabs button.selected:after { content: none; }
.profile-tab-indicator { position: absolute; bottom: 0; left: 0; width: calc(100% / var(--profile-tab-count)); height: 2px; transform: translateX(calc(var(--profile-tab-index) * 100%)); transition: transform 180ms var(--ease-ios); pointer-events: none; }
.profile-tab-indicator:after { content: ''; width: 44px; height: 2px; display: block; margin: 0 auto; background: var(--ink); }
.profile-panels, .profile-panel { min-height: calc(var(--profile-viewport, 700px) - 89px); overflow-anchor: none; }
.profile-panel > .empty-state { min-height: 270px; }
.profile-tabs button:focus-visible { outline: 2px solid #20c4cb; outline-offset: -4px; border-radius: 4px; }

.ios-albums { row-gap: 24px; padding-bottom: 24px; }
.ios-albums .album-thumb { position: relative; overflow: hidden; display: grid; place-items: center; background: #f2f2f7; color: #8e8e93; }
.album-thumb img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.album-type-icon { position: relative; z-index: 1; }
.album-thumb:has(img) .album-type-icon { position: absolute; left: 10px; bottom: 8px; color: #fff; filter: drop-shadow(0 1px 2px #0008); }
.ios-albums .album-thumb:has(img) .icon { width: 24px; height: 24px; }
.gallery-library-heading { gap: 12px; }
.gallery-library-heading button { display: inline-flex; align-items: center; gap: 3px; }
.gallery-library-heading .icon { width: 16px; height: 16px; }
.gallery-library-heading strong { margin: 0 auto; padding-right: 80px; font-weight: 600; }

/* Launch screen: familiar TikTik lockup, with the local mascot marching in place. */
.launch-screen { position: absolute; inset: 0; z-index: 70; background: #000; color: #fff; border-radius: inherit; overflow: hidden; opacity: 1; transition: opacity 220ms ease; }
.launch-screen.leaving { opacity: 0; pointer-events: none; }
.device.launching > .status-bar { color: #fff; }
.launch-content { position: absolute; width: 100%; left: 0; top: 34%; transform: translateY(-25%); display: flex; flex-direction: column; align-items: center; }
.launch-logo { display: flex; flex-direction: column; align-items: center; }
.launch-mark { display: block; width: 94px; height: 94px; margin-left: -5px; }
.launch-logo strong { display: block; font-family: var(--font-app); font-size: 43px; line-height: 1; font-weight: 900; letter-spacing: -2px; margin-top: -4px; }
.launch-cat-lane { width: 170px; height: 111px; position: relative; margin-top: 43px; }
.launch-cat { position: absolute; left: 49px; bottom: 8px; width: 72px; height: 96px; object-fit: contain; transform-origin: 50% 85%; animation: cat-march 680ms ease-in-out infinite; }
.launch-cat-shadow { position: absolute; left: 54px; bottom: 6px; width: 62px; height: 7px; border-radius: 50%; background: #fff2; filter: blur(3px); animation: cat-shadow 680ms ease-in-out infinite; }
.launch-paw { position: absolute; font-size: 17px; opacity: 0; bottom: 4px; filter: grayscale(1); animation: cat-footstep 680ms ease-out infinite; }
.paw-left { left: 35px; transform: rotate(-20deg); }
.paw-right { right: 31px; animation-delay: 340ms; transform: rotate(20deg); }
.launch-copy { font-size: 12px; line-height: 18px; color: #ffffff80; margin-top: 12px; }
.launch-dots { display: flex; align-items: center; justify-content: center; width: 56px; height: 23px; margin-top: 16px; position: relative; }
.launch-dots i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #25f4ee; animation: launch-dot 900ms ease-in-out infinite; mix-blend-mode: screen; }
.launch-dots i+i { background: #fe2c55; animation-delay: -450ms; }
@keyframes cat-march { 0%,100% { transform: translate(-3px,0) rotate(-5deg); } 25% { transform: translate(0,-5px) rotate(0); } 50% { transform: translate(3px,0) rotate(5deg); } 75% { transform: translate(0,-5px) rotate(0); } }
@keyframes cat-shadow { 0%,50%,100% { transform: scaleX(1); opacity: .7; } 25%,75% { transform: scaleX(.75); opacity: .35; } }
@keyframes cat-footstep { 0% { opacity: 0; translate: 0 4px; } 20% { opacity: .55; } 100% { opacity: 0; translate: 0 14px; } }
@keyframes launch-dot { 0%,100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
.gallery-library-heading { position: relative; }
.gallery-library-heading strong { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; }

/* Keep offscreen feed items and decoded image surfaces out of Safari's working set. */
.reel-shell { background: #080808; }
.reel-shell:after { display: none; }
.reel:not(.is-active) .disc, .device.launching .disc { animation-play-state: paused; }
.photo-slide img:not([src]), .grid-tile > img:not([src]) { visibility: hidden; }
.preview-slide img:not([src]) { visibility: hidden; }

/* The conversation is part of the local joke; it never sends a real DM. */
.chat-screen { background: #fff; }
.chat-header { display: flex; align-items: center; gap: 12px; min-height: 59px; padding: 6px 14px 10px; border-bottom: 1px solid #f1f1f2; flex: none; }
.chat-header > button { flex: none; display: grid; place-items: center; min-width: 26px; min-height: 35px; }
.chat-header .icon { width: 24px; height: 24px; }
.chat-header .chat-person { display: flex; flex: 1; justify-content: flex-start; gap: 10px; text-align: left; }
.chat-person .avatar { width: 38px; height: 38px; }
.chat-person strong { display: block; font-size: 15px; line-height: 21px; font-weight: 700; }
.chat-person small { display: block; color: #888; font-size: 11px; line-height: 16px; }
.chat-log { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 0 14px 18px; }
.chat-intro { padding: 24px 0 16px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.chat-intro .avatar { width: 76px; height: 76px; margin-bottom: 5px; }
.chat-intro strong { font-size: 17px; }
.chat-intro > span:last-child { font-size: 12px; color: #999; }
.chat-day { text-align: center; font-size: 11px; color: #aaa; margin: 21px 0 15px; }
.chat-row { display: flex; align-items: flex-end; gap: 7px; margin: 9px 0; }
.chat-row > .avatar { flex: none; width: 26px; height: 26px; }
.chat-row.outgoing { justify-content: flex-end; padding-left: 36px; }
.chat-row.incoming { padding-right: 32px; }
.chat-bubble { max-width: 270px; padding: 11px 13px; border-radius: 14px 14px 14px 4px; background: #f1f1f2; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; white-space: pre-line; }
.outgoing .chat-bubble { border-radius: 14px 14px 4px 14px; background: #dff5f4; }
.chat-read { text-align: right; margin-top: -3px; font-size: 10px; color: #aaa; }
.chat-compose { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; border-top: 1px solid #f1f1f2; }
.chat-input-wrap { display: flex; align-items: center; gap: 8px; border-radius: 22px; padding: 10px 12px; background: #f1f1f2; flex: 1; min-width: 0; }
.chat-input-wrap .icon { width: 21px; height: 21px; flex: none; }
.chat-input-wrap input { background: transparent; border: 0; outline: none; width: 100%; min-width: 0; font-size: 16px; }
.chat-compose > button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #20c4cb; color: #fff; flex: none; }
.chat-compose > button .icon { width: 21px; height: 21px; }
.direct-message-row > div { min-width: 0; }
.direct-message-row p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 245px; }
.chat-typing .chat-bubble { display: flex; align-items: center; gap: 4px; min-height: 36px; }
.chat-typing i { width: 5px; height: 5px; background: #aaa; border-radius: 50%; animation: chat-dot 900ms ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: 150ms; }
.chat-typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes chat-dot { 0%,80%,100% { opacity: .4; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Keep the last portrait screen intact underneath the landscape cat break. */
.phone-layout body { background: #000; }
.phone-layout .desktop-brand, .phone-layout .desktop-hint { display: none; }
.phone-layout .device-stage {
  position: fixed;
  left: 50%; top: 50%;
  width: var(--portrait-width); height: var(--portrait-height);
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.phone-layout .device {
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  width: 100%; height: 100%;
  transform: none; border-radius: 0; box-shadow: none;
}
.phone-layout .device>.status-bar { display: none; }
.phone-layout .home-zone { padding: 0; }
.phone-layout .home-zone span, .phone-layout .full-overlay:after { display: none; }
.phone-layout .profile-avatar>.avatar { width: 96px; height: 96px; }

.phone-landscape .device-stage { visibility: hidden; pointer-events: none; }
.cat-playground { position: fixed; inset: 0; z-index: 200; overflow: hidden; background: #000; color: #fff; isolation: isolate; user-select: none; outline: none; }
.zoomies-brand { position: absolute; top: max(20px, env(safe-area-inset-top)); left: max(27px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 5px; font-size: 21px; font-weight: 850; letter-spacing: -1px; }
.zoomies-brand .brand-note { font-size: 32px; }
.zoomies-copy { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); z-index: 3; text-align: center; pointer-events: none; }
.zoomies-copy h1 { font-size: clamp(17px, 3vw, 24px); line-height: 1.35; letter-spacing: -.3px; font-weight: 600; }
.zoomies-cat { position: absolute; top: 16px; left: 12px; width: 112px; height: 152px; z-index: 2; transform: translate(0, calc(var(--run-y) * .6)); animation: cat-zoomies 8.2s linear infinite; -webkit-user-drag: none; }
.zoomies-sprite { position: absolute; inset: 0; animation: cat-sprint 180ms linear infinite; transform-origin: 50% 90%; }
.zoomies-sprite img { width: 108px; height: 144px; object-fit: contain; pointer-events: none; clip-path: polygon(15% 1%, 27% 4%, 35% 7%, 65% 7%, 73% 4%, 86% 1%, 88% 5%, 86% 20%, 83% 31%, 77% 39%, 78% 42%, 82% 51%, 84% 61%, 83% 73%, 80% 80%, 75% 82%, 72% 89%, 73% 94%, 69% 98%, 62% 99%, 59% 96%, 58% 94%, 56% 93%, 52% 95%, 51% 99%, 42% 100%, 36% 98%, 33% 94%, 28% 91%, 25% 85%, 23% 79%, 23% 66%, 23% 61%, 25% 51%, 30% 42%, 29% 39%, 24% 33%, 20% 26%, 17% 16%); }
.zoomies-shadow { position: absolute; left: 17px; bottom: 0; width: 75px; height: 8px; background: #fff2; border-radius: 50%; filter: blur(4px); animation: cat-shadow 180ms linear infinite; }
.zoomies-dust { position: absolute; font-size: 22px; left: -13px; bottom: 4px; opacity: 0; filter: grayscale(1); pointer-events: none; animation: cat-dust 420ms linear infinite; }
.zoomies-dust.dust-two { left: -32px; bottom: 20px; animation-delay: 210ms; }
@keyframes cat-zoomies {
  0%,100% { transform: translate(calc(var(--run-x) * .07), calc(var(--run-y) * .5)) rotate(-12deg); }
  15% { transform: translate(calc(var(--run-x) * .88), calc(var(--run-y) * .2)) rotate(14deg); }
  19% { transform: translate(calc(var(--run-x) * .93), calc(var(--run-y) * .2)) rotate(-18deg); }
  37% { transform: translate(calc(var(--run-x) * .22), calc(var(--run-y) * .83)) rotate(-9deg); }
  42% { transform: translate(calc(var(--run-x) * .16), calc(var(--run-y) * .83)) rotate(17deg); }
  57% { transform: translate(calc(var(--run-x) * .68), calc(var(--run-y) * .08)) rotate(8deg); }
  62% { transform: translate(calc(var(--run-x) * .68), calc(var(--run-y) * .08)) rotate(-16deg); }
  79% { transform: translate(calc(var(--run-x) * .96), calc(var(--run-y) * .8)) rotate(15deg); }
  84% { transform: translate(calc(var(--run-x) * .96), calc(var(--run-y) * .8)) rotate(-19deg); }
}
@keyframes cat-sprint {
  0%,100% { transform: translateY(0) rotate(-8deg) scale(1.04,.94); }
  25% { transform: translateY(-9px) rotate(0) scale(.94,1.06); }
  50% { transform: translateY(0) rotate(8deg) scale(1.04,.94); }
  75% { transform: translateY(-9px) rotate(0) scale(.94,1.06); }
}
@keyframes cat-dust { 0% { opacity: .5; transform: translateX(0) scale(.8); } 100% { opacity: 0; transform: translateX(-25px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .zoomies-cat { left: calc(50% - 56px); top: 15%; transform: none; }

}