:root { color-scheme: light; }
* { box-sizing: border-box; }
html { background: #f2f2f2; }
body { margin: 0; min-height: 100dvh; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.feed { width: 100%; max-width: 440px; min-height: 100dvh; margin: 0 auto; background: #fff; overflow-anchor: none; }
.post { display: flex; align-items: center; width: 100%; height: 100dvh; margin: 0; background: #fff; }
.frame { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #f0f0ef; }
.frame img, .frame video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.post img { user-select: none; -webkit-user-drag: none; }
.post video { background: #111; }
.sound-toggle { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border: 0; border-radius: 50%; background: rgba(0,0,0,.38); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.sound-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle[data-muted="true"] .waves, .sound-toggle[data-muted="false"] .muted-mark { display: none; }
.sound-toggle:focus-visible { outline: 2px solid white; outline-offset: 2px; }
@media (max-width: 440px) { html { background: #fff; } }