:root{--bg: #fff;--fg: #111;--muted: #8e8e8e;--border: #dbdbdb;--accent: #0095f6;--heart: #ed4956;--surface: #fafafa}@media(prefers-color-scheme:dark){:root{--bg: #000;--fg: #fafafa;--muted: #a8a8a8;--border: #262626;--surface: #121212}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app{max-width:640px;margin:0 auto;min-height:100vh}.topbar{display:flex;align-items:center;height:54px;padding:0 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:5}.wordmark{font-size:22px;font-weight:700;letter-spacing:.3px}.backbtn{display:grid;place-items:center;background:none;border:0;color:var(--fg);padding:4px 10px 4px 0;margin-left:-6px;cursor:pointer}.pagetitle{font-size:17px;font-weight:700}.muted{color:var(--muted)}.small{font-size:13px}.profile{display:flex;align-items:center;gap:20px;padding:20px 16px}.avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff;display:grid;place-items:center;font-size:28px;font-weight:700;overflow:hidden;cursor:pointer}.avatar img{width:100%;height:100%;object-fit:cover}.handle{font-size:17px;font-weight:600}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#0009;animation:fadein .25s ease}.lightbox.closing{background:#0000;transition:background .25s ease}.lightbox-circle{position:fixed;border-radius:50%;overflow:hidden;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);display:grid;place-items:center;box-shadow:0 12px 48px #00000073;transition:left .28s cubic-bezier(.22,1.2,.36,1),top .28s cubic-bezier(.22,1.2,.36,1),width .28s cubic-bezier(.22,1.2,.36,1),height .28s cubic-bezier(.22,1.2,.36,1)}.lightbox-circle img{width:100%;height:100%;object-fit:cover}.lightbox-initial{color:#fff;font-size:64px;font-weight:700}@keyframes fadein{0%{background:#0000}}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.cell{position:relative;aspect-ratio:1;border:0;padding:0;background:var(--surface);cursor:pointer;overflow:hidden}.badge{position:absolute;top:6px;right:6px;color:#fff;display:grid;place-items:center}.badge.play{top:auto;bottom:6px;left:8px;right:auto}.media{position:relative;width:100%}.media img,.media video{display:block;width:100%;height:100%;object-fit:cover}.media.thumb{aspect-ratio:1;height:100%}.slide .media img,.slide .media video{width:100%;max-height:72vh;object-fit:contain;background:#000}.overlay,.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.vignette{box-shadow:inset 0 0 80px 40px #000;background:transparent}.placeholder{aspect-ratio:1;background:var(--surface)}.feedlist{display:flex;flex-direction:column}.postcard{border-bottom:1px solid var(--border);padding-bottom:18px;scroll-margin-top:54px}.cardhead{display:flex;align-items:center;gap:10px;padding:10px 12px}.miniavatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}.miniavatar img{width:100%;height:100%;object-fit:cover}.cardhandle{font-size:14px;font-weight:600}.postdate{padding:0 16px;margin:6px 0 0}.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}.slide{position:relative;flex:0 0 100%;scroll-snap-align:center}.heartburst{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:96px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5);animation:pop .7s ease-out forwards;pointer-events:none}@keyframes pop{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:0}}.greeting{padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--border);font-size:15px}.stories{display:flex;gap:14px;padding:14px 16px;overflow-x:auto;border-bottom:1px solid var(--border)}.story{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;max-width:76px}.ring{width:66px;height:66px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);display:block;overflow:hidden}.ring.seen{background:var(--border)}.ring .media{width:60px;height:60px;border-radius:50%;overflow:hidden;border:2px solid var(--bg)}.storylabel{font-size:12px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loc{padding:0 16px}.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%);background:#000000d9;color:#fff;padding:12px 18px;border-radius:22px;font-size:14px;max-width:88%;text-align:center;z-index:60}.dots{display:flex;gap:6px;justify-content:center;padding:10px}.dot{width:7px;height:7px;border-radius:50%;border:0;background:var(--border);cursor:pointer}.dot.on{background:var(--accent)}.caption{padding:4px 16px;margin:0;line-height:1.4}.actions{display:flex;align-items:center;gap:14px;padding:10px 16px 0}.heart{border:0;background:none;font-size:26px;line-height:1;color:var(--fg);cursor:pointer;padding:0}.heart.on{color:var(--heart)}.commentbtn{border:0;background:none;color:var(--fg);cursor:pointer;padding:0;display:grid;place-items:center}.mycomment{padding:2px 16px;margin:0;line-height:1.4}.commentbar{display:flex;gap:8px;padding:12px 16px 0}.commentbar input{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--fg);font-size:15px}.commentbar button{border:0;background:none;color:var(--accent);font-weight:600;cursor:pointer}.commentbar button:disabled{color:var(--muted)}.zoomable{touch-action:pan-y}.zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0000;pointer-events:none}.zoom-clone{position:fixed;will-change:transform}.zoom-clone .media img,.zoom-clone .media video{width:100%;max-height:72vh;object-fit:contain;background:#000}.centered{min-height:100vh;display:grid;place-content:center;text-align:center;gap:8px;padding:24px}.foot{text-align:center;padding:24px 16px;font-size:12px;line-height:1.5}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;margin:0 auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.storyview{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:20}.sdrag{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:#000;border-radius:0;transition:transform .2s ease;overflow:hidden}.sbars{display:flex;gap:4px;padding:10px 12px calc(4px + env(safe-area-inset-top))}.sbar{flex:1;height:3px;background:#ffffff59;border-radius:2px;overflow:hidden}.sbarfill{height:100%;background:#fff}.shead{display:flex;align-items:center;gap:10px;padding:6px 12px}.sheadtext{display:flex;flex-direction:column;min-width:0}.sname{color:#fff;font-size:14px;font-weight:600}.sdate{color:#ffffffbf;font-weight:400}.stitle{color:#fffffff2;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.miniavatar.dark{border:1px solid rgba(255,255,255,.4)}.smute{margin-left:auto;background:none;border:0;font-size:18px;cursor:pointer;padding:4px}.sclose{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:4px 2px;margin-left:4px}.smute+.sclose{margin-left:0}.shead .sclose:only-of-type{margin-left:auto}.sstage{flex:1;display:grid;place-items:center;position:relative;touch-action:none;min-height:0}.sstage .media{width:100%}.sstage .media img,.sstage .media video{width:100%;max-height:78vh;object-fit:contain}.spaused{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ffffffd9;font-size:28px;pointer-events:none}.sfoot{padding:8px 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}.scaption{text-align:center;color:#fff;padding:0 12px;text-shadow:0 1px 6px rgba(0,0,0,.7)}.sbar-actions{display:flex;align-items:center;gap:10px}.sbar-actions input{flex:1;padding:11px 14px;border:1px solid rgba(255,255,255,.5);border-radius:22px;background:transparent;color:#fff;font-size:15px;outline:none}.sbar-actions input::placeholder{color:#fff9}.sheart{border:0;background:none;font-size:28px;line-height:1;color:#fff;cursor:pointer;padding:2px}.sheart.on{color:var(--heart)}.ssend{border:0;background:none;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
