:root{--ink:#191917;--paper:#f4f4ef;--coral:#ed765e;--line:#deded5;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;height:100dvh;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}[hidden]{display:none!important}p{margin:0;text-wrap:pretty}h1,h2{margin:0;line-height:1.1;letter-spacing:-.04em;text-wrap:balance}.app-header{height:72px;padding:0 32px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line)}.brand img{display:block;width:100px;height:54px;object-fit:contain}.app-header nav{display:flex;gap:8px}.app-header nav a{padding:10px 18px;border-radius:30px;font-size:13px;font-weight:650}.app-header nav a[aria-current=page]{background:var(--ink);color:white}.demo-label{margin-left:auto;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#767670}main{height:calc(100dvh - 72px);max-width:1150px;margin:auto;padding:20px 28px 0;display:flex;flex-direction:column}.feed-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;padding-bottom:18px}.eyebrow{font-size:9px;font-weight:750;letter-spacing:.16em;color:#77786d;margin-bottom:5px}.feed-heading h1{font-size:30px}.feed-heading p:not(.eyebrow){font-size:12px;color:#66685e;margin-top:7px}#feed-count{font-size:11px;color:#666;white-space:nowrap}#social-feed{flex:1;min-height:0;overflow:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;border-radius:20px 20px 0 0;background:#111;scrollbar-width:thin;scrollbar-color:#555 #111}.social-post{height:100%;min-height:0;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.75fr);overflow:hidden}.video-wrap{position:relative;background:#101010;min-height:0}.video-host,.video-host iframe{width:100%;height:100%;border:0;display:block}.video-placeholder{height:100%;display:grid;place-content:center;color:#eee;text-align:center;font-size:12px;gap:12px}.video-placeholder button{background:#eee;border:0;padding:12px 20px;border-radius:30px}.slap-action{position:absolute;left:22px;top:46%;z-index:2;border:1px solid #ffffffa0;border-radius:24px;background:#f7f6eff5;box-shadow:0 6px 24px #0005;padding:8px 16px 11px;display:flex;flex-direction:column;align-items:center;min-width:122px}.slap-action img{width:104px;height:54px;object-fit:contain}.slap-action span{font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}.post-copy{background:white;padding:32px;display:flex;flex-direction:column;justify-content:center;gap:17px;overflow:auto}.post-copy .kind{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7c7d73}.post-copy h2{font-size:34px}.area-pill{display:flex;align-items:center;gap:7px;font-size:13px}.area-dot{width:7px;height:7px;background:var(--coral);border-radius:100%}.creator{font-size:13px;font-weight:650;overflow-wrap:anywhere}.post-description{font-size:14px;color:#66695e;line-height:1.7}.post-meta{font-size:11px;color:#838579}.text-map{align-self:flex-start;border:0;border-bottom:1px solid #bbb;background:none;padding:6px 0;font-size:13px;font-weight:650}.playback-note{font-size:10px;color:#888}.feed-nav{height:44px;display:flex;align-items:center;gap:8px;flex-shrink:0}.feed-nav span{font-size:11px;color:#686b60;margin-right:auto}.feed-nav button{width:34px;height:30px;border:1px solid var(--line);border-radius:8px;background:transparent}.feed-nav button:disabled{opacity:.3}#map-panel{position:fixed;inset:0;z-index:5;background:var(--paper);display:flex;flex-direction:column}.map-header{display:flex;justify-content:space-between;align-items:center;height:65px;padding:10px 24px;border-bottom:1px solid var(--line)}.map-header img{width:80px;height:45px;object-fit:contain}.map-header button{border:0;background:none;font-size:13px}.map-copy{padding:24px 28px;max-width:880px}.map-copy h1{font-size:30px}.map-copy p:not(.eyebrow){margin-top:8px;font-size:13px;color:#626659}.map-copy a{display:inline-block;border-bottom:1px solid #999;margin-top:12px;font-size:12px}#map-frame{flex:1;min-height:0;background:#e7e9df}#map-frame iframe{width:100%;height:100%;border:0;display:block}.map-footer{padding:12px 24px;font-size:11px;color:#666}#feed-error{padding:30px;background:white;border:1px solid var(--line)}
@media(max-width:650px){.app-header{height:56px;padding:0 13px;gap:10px}.brand img{width:63px;height:42px}.app-header nav{gap:2px}.app-header nav a{font-size:11px;padding:8px 11px}.demo-label{font-size:8px}main{height:calc(100dvh - 56px);padding:10px 0 0}.feed-heading{padding:0 15px 10px}.feed-heading h1{font-size:23px}.feed-heading p:not(.eyebrow){display:none}.feed-heading .eyebrow{font-size:8px}#feed-count{font-size:9px}#social-feed{border-radius:0}.social-post{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.post-copy{padding:13px 17px;gap:5px;max-height:180px;justify-content:flex-start}.post-copy h2{font-size:22px}.post-copy .kind{font-size:8px}.area-pill,.creator{font-size:11px}.post-description{display:none}.post-meta{font-size:9px}.text-map{display:none}.playback-note{font-size:9px}.slap-action{left:14px;top:45%;min-width:105px;border-radius:19px;padding:5px 10px 8px}.slap-action img{width:88px;height:45px}.slap-action span{font-size:9px}.feed-nav{height:35px;padding:0 13px}.map-copy{padding:18px 20px}.map-copy h1{font-size:26px}.map-copy p:not(.eyebrow){font-size:12px}}
.slap-action img{object-fit:cover;transform:scale(1.5)}.brand img,.map-header img{object-fit:cover}.map-copy p,.map-footer{text-wrap:pretty}
/* Wavy oval Slap badge; only the active post moves. */
.slap-action{width:146px;min-width:146px;height:100px;padding:14px 12px 19px;border:0;border-radius:50%;background:transparent;box-shadow:none;filter:drop-shadow(0 5px 8px #0005);justify-content:center;gap:1px;transform-origin:50% 65%;isolation:isolate}
.slap-frame{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.slap-frame path{fill:#fff9ec;stroke:#ed765e;stroke-width:2.2;vector-effect:non-scaling-stroke}
.slap-action img{width:104px;height:49px;object-fit:cover;transform:scale(1.45);pointer-events:none}
.slap-action span{font-size:9px;letter-spacing:.05em;white-space:nowrap;pointer-events:none}
.is-active .slap-action{animation:slap-wiggle 5.5s ease-in-out infinite}
.slap-action:hover,.slap-action:focus-visible{animation:none;transform:rotate(-3deg) scale(1.06)}
@keyframes slap-wiggle{0%,22%,100%{transform:rotate(0)}4%,12%{transform:rotate(-5deg)}8%,16%{transform:rotate(5deg)}20%{transform:rotate(-2deg)}}
@media(max-width:650px){.slap-action{width:128px;min-width:128px;height:89px;left:12px;padding:12px 10px 17px}.slap-action img{width:91px;height:43px}.slap-action span{font-size:8px}#feed-count{max-width:115px;white-space:normal;text-align:right}}
@media(prefers-reduced-motion:reduce){.is-active .slap-action,.slap-action:hover,.slap-action:focus-visible{animation:none;transform:none}}

/* Viewing mode: navigation plus the largest available original player. */
.app-header{height:60px;padding:0 20px;gap:20px}.brand img{height:48px;width:86px}
.sound-toggle{margin-left:auto;border:1px solid var(--line);border-radius:24px;background:transparent;padding:8px 12px;font-size:12px;white-space:nowrap}
main{height:calc(100dvh - 60px);max-width:none;padding:0;position:relative}
.feed-heading,.feed-nav,.post-copy{display:none}
#social-feed{border-radius:0;scrollbar-width:none}#social-feed::-webkit-scrollbar{display:none}
.social-post{display:block;position:relative}.video-wrap{height:100%;width:100%}
.slap-action{left:max(20px,calc(50% - 240px));top:48%}
@media(max-width:650px){.app-header{height:54px;padding:0 10px;gap:7px}.brand img{width:58px;height:40px}.app-header nav a{padding:8px 10px}.sound-toggle{font-size:11px;padding:7px 9px}main{height:calc(100dvh - 54px)}.slap-action{left:12px}}

.video-meta{position:absolute;top:72px;left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:20px;background:#161616b3;color:white;font-size:10px;white-space:nowrap;pointer-events:none}

/* Keep post context outside the picture and the map badge near its edge. */
.social-post{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 52px}
.post-context{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 20px;background:var(--paper);border-top:1px solid var(--line);min-width:0}
.location-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;border:1px solid #ed765e50;border-radius:999px;background:#ed765e12;padding:5px 11px;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.location-chip>span{font-size:19px;line-height:1;color:#cb5741}
.date-chip{display:flex;align-items:center;gap:9px;white-space:nowrap}.date-chip>span{font-size:8px;letter-spacing:.13em;color:#7c7d73;font-weight:650}.date-chip time{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.slap-action{left:16px;top:auto;bottom:82px;width:124px;min-width:124px;height:86px;padding:10px 10px 16px}.slap-action img{width:89px;height:42px}.slap-action span{font-size:7.5px}
@media(max-width:650px){.social-post{grid-template-rows:minmax(0,1fr) 48px}.post-context{padding:6px 12px;gap:8px}.location-chip{padding:4px 8px;font-size:10px;gap:5px}.date-chip{flex-direction:column;align-items:flex-end;gap:0}.date-chip time{font-size:11px}.date-chip>span{font-size:7px}.slap-action{left:10px;bottom:78px;width:104px;min-width:104px;height:73px;padding:8px 8px 13px}.slap-action img{width:75px;height:35px}.slap-action span{font-size:6.5px}}

/* Small stickers below creator attribution; the video center stays interactive. */
.social-post{display:block}.slap-action{top:86px;bottom:auto;left:16px}
.post-context{position:absolute;z-index:2;top:94px;left:156px;right:24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:9px;padding:0;background:none;border:0;pointer-events:none}
.location-chip{max-width:min(100%,300px);padding:7px 12px;border:2px solid #fff9ec;border-radius:12px 18px 12px 18px;background:#ffd95e;color:#352613;box-shadow:2px 3px 0 #3b24455c;transform:rotate(-2deg);font-size:12px;white-space:normal;text-wrap:pretty;overflow:visible}
.location-chip>span{color:#c64442;font-size:20px}
.date-chip{flex-direction:row;align-items:center;gap:7px;border:2px solid #fff9ec;border-radius:18px 10px 18px 10px;padding:5px 10px;background:#d9c5ff;color:#3b245f;box-shadow:2px 3px 0 #3b244545;transform:rotate(2deg)}
.date-chip::before{content:'📅';font-size:14px}.date-chip>span{color:#543581;font-size:8px;letter-spacing:.08em}.date-chip time{font-size:12px;font-weight:750}
@media(max-width:650px){.slap-action{top:80px;bottom:auto;left:10px}.post-context{top:86px;left:132px;right:14px;gap:7px}.location-chip{font-size:10px;padding:5px 9px;gap:5px}.date-chip{padding:4px 8px;gap:5px}.date-chip>span{font-size:7px}.date-chip time{font-size:10px}.date-chip::before{font-size:12px}}

/* Quiet glass location card beneath the original TikTok logo. */
.post-context{top:84px;left:auto;right:20px;width:max-content;max-width:min(240px,calc(100% - 154px));align-items:flex-end;gap:5px;padding:10px 13px;border:1px solid #ffffff40;border-right:3px solid #ed765e;border-radius:13px;background:#191923b8;backdrop-filter:blur(12px);box-shadow:0 4px 18px #0002;text-align:right;opacity:1}
.location-chip{max-width:100%;display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:#fff;font-size:15px;font-weight:750;letter-spacing:-.02em;line-height:1.25}
.location-chip>span{display:none}
.date-chip{padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;gap:7px;color:#fff}.date-chip::before{content:none}.date-chip>span{font-size:7px;color:#ffffffa6;letter-spacing:.12em}.date-chip time{font-size:11px;font-weight:550;color:#fff}
.is-active.context-shown .post-context{animation:context-fade 1.8s ease-out 3s forwards}
@keyframes context-fade{from{opacity:1}to{opacity:0}}
@media(max-width:650px){.post-context{top:80px;right:13px;max-width:calc(100% - 145px);padding:9px 11px}.location-chip{font-size:13px}.date-chip time{font-size:10px}}
@media(prefers-reduced-motion:reduce){.is-active.context-shown .post-context{animation-duration:0s}}

/* Explicit center playback control, independent of TikTok's tap behavior. */
.playback-toggle{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;padding:0;border:1px solid #ffffff80;border-radius:50%;background:#15151bc9;color:white;box-shadow:0 4px 24px #0003;display:grid;place-items:center;touch-action:pan-y;opacity:1;transition:opacity .15s ease}
.playback-toggle span{font-size:32px;line-height:1;pointer-events:none}.playback-toggle.is-playing{opacity:0}.playback-toggle.is-playing:hover,.playback-toggle.is-playing:focus-visible{opacity:1}
@media(prefers-reduced-motion:reduce){.playback-toggle{transition:none}}

/* Playing has an invisible hit target; only the paused Play control is drawn. */
.playback-toggle.is-playing,.playback-toggle.is-playing:hover,.playback-toggle.is-playing:focus-visible{opacity:0;background:transparent;border-color:transparent;box-shadow:none}
.playback-toggle.is-playing:focus-visible{outline:2px solid #ffffff80;outline-offset:4px}
/* Matching cream-and-coral decal shapes for post context. */
.post-context{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;gap:6px;align-items:flex-end;max-width:min(220px,calc(100% - 145px))}
.location-chip,.date-chip{position:relative;isolation:isolate;min-width:112px;padding:13px 20px;border:0;background:none;box-shadow:none;transform:rotate(-3deg);text-align:center;color:#a94332;filter:drop-shadow(0 3px 4px #0003)}
.location-chip{font-size:15px;font-weight:850;letter-spacing:-.025em;line-height:1.25;max-width:100%}
.date-chip{transform:rotate(3deg);justify-content:center;gap:5px;padding:10px 17px;min-width:102px}.date-chip>span{color:#946553;font-size:7px}.date-chip time{color:#3f3029;font-size:11px;font-weight:750}
.context-decal{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}.context-decal path{fill:#fff9ec;stroke:#ed765e;stroke-width:2.2;vector-effect:non-scaling-stroke}
.is-active .slap-action,.is-active .slap-action:hover,.is-active .slap-action:focus-visible,.is-active .slap-action:active{animation:none;transition:top .45s ease-in-out;transform:rotate(-3deg)}
@media(max-width:650px){.post-context{right:14px;top:82px}.location-chip{font-size:12px;min-width:100px;padding:11px 16px}.date-chip{min-width:97px;padding:10px 14px}.date-chip time{font-size:10px}}
@media(prefers-reduced-motion:reduce){.is-active .slap-action,.is-active .slap-action:hover,.is-active .slap-action:focus-visible,.is-active .slap-action:active{animation:none;top:80px;transform:none}}

/* One city decal, then one date decal, once for each post in this page. */
.post-context,.is-active.context-shown .post-context{animation:none;opacity:1}
.location-chip,.date-chip{opacity:0;--decal-tilt:-3deg}
.date-chip{--decal-tilt:3deg}
.context-shown .location-chip{animation:decal-drop 2s ease-in-out 0s both}
.context-shown .date-chip{animation:decal-drop 2s ease-in-out 2.2s both}
@keyframes decal-drop{0%{opacity:0;transform:translateY(-12px) rotate(var(--decal-tilt))}20%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(22px) rotate(var(--decal-tilt))}}
@media(prefers-reduced-motion:reduce){.is-active .slap-action{top:80px!important;transition:none}.context-shown .location-chip,.context-shown .date-chip{animation-name:decal-still}@keyframes decal-still{0%,100%{opacity:0}20%,75%{opacity:1}}}