:root{--bg:#000;--surface:#121212;--raised:#242424;--text:#fff;--muted:#b4b4b4;--line:#ffffff18;--orange:#ff6b3d;--ease:cubic-bezier(.2,.75,.25,1);--panel:300ms;--snap:280ms;--preview-scale:.357;--preview-height:276px}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{border:0;cursor:pointer;background:none;color:inherit;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{transition:transform 160ms var(--ease),opacity 160ms}button:active{transform:scale(.97)}button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px}button:disabled{cursor:default}
svg{width:24px;height:24px;display:block;overflow:visible}img{display:block;object-fit:cover}[hidden]{display:none!important}
::selection{background:#ffffff30;color:#fff}input{caret-color:#fff}
.app{width:100%;max-width:390px;height:100dvh;min-height:540px;max-height:980px;margin:auto;position:relative;overflow:clip;background:var(--bg);isolation:isolate}
.feed{position:absolute;inset:0 0 70px;overflow:clip;touch-action:none}.track{height:100%;transition:transform var(--snap) var(--ease)}
.clip{position:relative;height:100%;width:100%;overflow:clip;background:var(--bg)}
.media-stage{position:absolute;inset:0;transform-origin:50% 0;transition:transform var(--panel) var(--ease);z-index:0}
.clip video,.entry-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.entry-poster{z-index:1;pointer-events:none;transition:opacity 140ms}.video-ready .entry-poster{opacity:0}
.preview-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(15px) brightness(.5);transform:scale(1.08);opacity:0;transition:opacity var(--panel)}
.clip-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0003,transparent 18%,transparent 55%,#0002 72%,#000a);transition:opacity var(--panel)}
.feed-top{position:absolute;top:22px;right:17px;z-index:2;transition:opacity 180ms}
.icon-button{width:36px;height:36px;display:grid;place-items:center}.search-button{filter:drop-shadow(0 1px 5px #0008)}
.feed-meta{position:absolute;left:20px;right:73px;bottom:27px;z-index:2;transition:opacity 180ms;pointer-events:none;text-shadow:0 1px 7px #000a}
.author-line{margin-bottom:6px}.author-line button{pointer-events:auto;display:flex;align-items:center}
.author-name{font-size:16px;font-weight:600}.post-caption{font-size:15px;line-height:1.5;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.actions{position:absolute;right:14px;bottom:26px;display:flex;flex-direction:column;gap:22px;z-index:3;transition:opacity 180ms}
.action{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:40px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;text-shadow:0 1px 7px #0009}
.action svg{width:29px;height:29px;filter:drop-shadow(0 1px 3px #0005)}
.action.liked span,.action.saved span{color:#fff}.action.share svg{width:28px}
.action-avatar{width:39px;height:39px;border:1.5px solid #fff;border-radius:50%}.avatar-action{margin-bottom:0}
.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:70px;background:var(--bg);display:flex;align-items:flex-start;justify-content:space-around;padding-top:13px;z-index:4;border-top:1px solid #ffffff12}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--muted);font-size:13px;min-width:80px}.bottom-nav .active{color:#fff}.nav-icon{width:22px;height:22px;display:grid;place-items:center}.nav-icon img{width:22px;height:22px;opacity:.706}.bottom-nav .active .nav-icon img{opacity:1}
.video-progress{position:absolute;bottom:70px;height:1px;left:0;right:0;background:#ffffff15;z-index:3}.video-progress i{display:block;width:0;height:100%;background:#ffffff90}
.pause-mark{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:none;pointer-events:none;background:#0003;padding:22px;border-radius:50%;z-index:3}.pause-mark.visible{display:block}.pause-mark svg{width:40px;height:40px}
.heart-stamp{position:absolute;width:112px;height:112px;z-index:7;pointer-events:none;opacity:0;transform:translate(-50%,-50%);color:var(--orange);will-change:transform,opacity}
.stamp-heart{position:absolute;width:58px;height:58px;left:27px;top:27px;filter:drop-shadow(0 2px 5px #0006)}.stamp-heart svg{width:58px;height:58px;stroke:var(--orange);stroke-width:1}
.heart-stamp.stamp{animation:heart-stamp 620ms both}.stamp .stamp-heart{animation:heart-confirm 620ms both}
@keyframes heart-confirm{0%{transform:scale(.58)}20%{transform:scale(1.12)}36%,100%{transform:scale(1)}}
@keyframes heart-stamp{0%,55%{opacity:1;transform:translate(-50%,-50%) scale(1)}90%{opacity:1;transform:translate(calc(-50% + var(--fly-x)),calc(-50% + var(--fly-y))) scale(.45)}100%{opacity:0;transform:translate(calc(-50% + var(--fly-x)),calc(-50% + var(--fly-y))) scale(.45)}}
.sheet-shade{position:absolute;inset:0;pointer-events:none;z-index:8;background:#0000;transition:background var(--panel)}.sheet-shade.visible{pointer-events:auto;background:#0002}
.comments-sheet{box-shadow:0 -1px 0 #ffffff08;position:absolute;left:0;right:0;bottom:0;height:568px;max-height:75%;background:var(--surface);border-radius:18px 18px 0 0;color:#fff;z-index:9;transform:translateY(102%);transition:transform var(--panel) var(--ease);display:flex;flex-direction:column;visibility:hidden}
.comments-sheet.open{transform:translateY(0);visibility:visible}.comments-sheet.closing{visibility:visible}
.sheet-handle{height:23px;width:100%;flex-shrink:0;display:grid;place-items:center;touch-action:none}.sheet-handle:before{content:'';height:3px;width:30px;border-radius:3px;background:#636363}
.comments-header{padding:9px 21px 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:.5px solid var(--line)}.comments-header h2{font-size:16px;font-weight:600;margin:0}
.comments-header>div{display:flex;align-items:center;gap:10px}.comments-header>div>button:first-child{font-size:13px;color:var(--muted)}.comments-header .icon-button{height:25px;width:25px}.comments-header svg{width:19px;height:19px}
.comment-list{padding:21px 21px 12px;overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent}
.comment-row{display:flex;gap:10px;margin-bottom:24px}.comment-avatar{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--raised)}.comment-body{flex:1;min-width:0}
.comment-user{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:7px;margin-bottom:6px}.creator-badge{font-size:13px;color:var(--muted)}
.comment-text{margin:0;font-size:14px;line-height:1.6;word-break:break-word}.comment-time{color:var(--muted);font-size:13px;margin-top:7px;display:flex;gap:13px}.comment-time button{font-size:13px;color:var(--muted)}
.comment-heart{font-size:13px;color:var(--muted);min-width:28px;display:flex;flex-direction:column;align-items:center;gap:5px;height:40px;padding-top:4px}.comment-heart svg{width:16px;height:16px}.comment-heart.liked{color:#fff}
.reply-row{display:flex;gap:8px;margin-top:15px}.reply-row .comment-avatar{width:22px;height:22px}.reply-row .comment-user{font-size:13px;margin-bottom:4px}.reply-row .comment-text{font-size:13px}
.comment-form{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:13px 20px 24px;border-top:.5px solid var(--line);background:var(--surface)}
.self-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0}.comment-form input{background:var(--raised);border:0;border-radius:22px;height:42px;padding:0 15px;min-width:0;flex:1;color:#fff;outline-offset:1px;font-size:14px}.comment-form input::placeholder{color:var(--muted)}
.comment-form button{width:33px;height:33px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#000;flex-shrink:0}.comment-form button:disabled{background:#292929;color:#a4a4a4}.comment-form svg{width:18px;height:18px}
.comments-open .feed-meta,.comments-open .actions,.comments-open .feed-top,.comments-open .video-progress{opacity:0;pointer-events:none}.comments-open .media-stage{transform:scale(var(--preview-scale))}.comments-open .preview-backdrop{opacity:1}.comments-open .clip-shade{opacity:0}
.profile,.search-view{position:absolute;inset:0;background:var(--surface);color:#fff;z-index:10;overflow:auto;overscroll-behavior:contain;transform:translateX(102%);transition:transform var(--panel) var(--ease);visibility:hidden;scrollbar-width:none}
.profile.open,.search-view.open{transform:translateX(0);visibility:visible}.profile.closing,.search-view.closing{visibility:visible}
.main-surface{position:absolute;inset:0 0 70px;background:var(--surface);color:#fff;z-index:3;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.app[data-page="saved"] .feed-top,.app[data-page="me"] .feed-top,.app[data-page="saved"] .video-progress,.app[data-page="me"] .video-progress{visibility:hidden}
.profile-top{height:56px;padding:13px 16px 7px;display:flex;justify-content:space-between;align-items:center;color:#fff}.profile-top svg{width:22px;height:22px}
.profile-identity{padding:8px 20px 20px;display:flex;align-items:center;gap:13px}
.profile-avatar{height:56px;width:56px;border-radius:50%;background:var(--raised);flex-shrink:0}
.profile-identity h1{font-size:23px;line-height:1.3;letter-spacing:0;margin:0;font-weight:600;flex:1}
.profile-buttons{display:flex;gap:10px}.profile-buttons .primary-button{height:34px;width:76px;font-size:14px;border-radius:4px;flex:none;background:transparent;color:#fff;border:1px solid #ffffff66}
.primary-button{background:#fff;color:#000;border-radius:5px;font-weight:600;height:41px;flex:1;font-size:14px}.primary-button.followed{background:var(--raised);color:#fff;border:1px solid #ffffff30}
.profile-section{padding:0 20px;display:flex;align-items:center;height:29px}
.profile-tabs{display:flex;gap:28px;height:48px}.profile-tabs button{height:100%;position:relative;color:var(--muted);font-size:14px}.profile-tabs button.selected{color:#fff;font-weight:600}.profile-tabs button.selected:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#fff}
#self-profile>.profile-identity{padding-top:34px}#self-profile .profile-section{height:48px;margin-bottom:12px}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding-bottom:24px}
.work-tile{aspect-ratio:3/4;position:relative;text-align:left;overflow:clip;background:var(--raised)}.work-tile img{height:100%;width:100%;transition:transform 300ms}
.work-tile:after{content:'';position:absolute;inset:76% 0 0;background:linear-gradient(transparent,#000b)}
.tile-title{position:absolute;left:11px;right:9px;bottom:12px;z-index:1;font-size:14px;color:#fff;font-weight:500;line-height:1.5;text-shadow:0 1px 5px #0008}
.collection-header{display:flex;align-items:baseline;justify-content:space-between;padding:34px 23px 26px}.collection-header h1{font-size:26px;font-weight:600;margin:0}.collection-header>span{color:var(--muted);font-size:13px}
.saved-grid{padding:0 16px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 12px}.saved-tile{text-align:left;position:relative;min-width:0}.saved-tile>img{width:100%;aspect-ratio:3/4;margin-bottom:10px}.saved-tile strong{display:block;font-size:14px;font-weight:500;line-height:1.5;margin-bottom:5px}.saved-tile>span{font-size:13px;color:var(--muted)}.saved-likes{display:none}
.light-header{padding:24px 18px 15px;display:flex;align-items:center;gap:9px}.light-header h1{font-size:19px;font-weight:600;margin:0}.light-header .icon-button svg{width:21px;height:21px}
.collection-row{display:flex;gap:14px;padding:14px 0;border-bottom:.5px solid var(--line);width:100%;text-align:left}.collection-row img{width:66px;height:86px}.collection-row>div{display:flex;flex-direction:column;justify-content:center;gap:9px}.collection-row strong{font-size:15px;font-weight:500}.collection-row span{font-size:13px;color:var(--muted)}
.empty-state{padding:90px 20px;text-align:center;color:var(--muted);line-height:1.8}.empty-state svg{margin:0 auto 16px;width:32px;height:32px}.empty-state button{color:#fff;margin-top:15px;text-decoration:underline;text-underline-offset:5px}
.search-field{display:flex;gap:10px;margin:0 22px 25px}.search-field input{width:100%;height:44px;border:1px solid var(--line);background:var(--raised);border-radius:6px;padding:0 13px;color:#fff;font-size:15px}.search-field input::placeholder{color:var(--muted)}.search-results{padding:0 22px}.search-results h2{font-size:13px;color:var(--muted);font-weight:400}
.following-empty{position:absolute;inset:90px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--bg);color:#fff}.following-empty>svg{width:36px;height:36px;opacity:.7}.following-empty h2{font-size:16px;font-weight:500;margin:0}.following-empty button{font-size:14px;color:#fff}
.share-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--surface);color:#fff;padding:22px 24px 34px;border-radius:18px 18px 0 0;z-index:13;transform:translateY(102%);transition:transform var(--panel) var(--ease);visibility:hidden}
.share-sheet.open{transform:translateY(0);visibility:visible}.share-sheet.closing{visibility:visible}.share-sheet h2{margin:0;font-size:17px;font-weight:600}.share-sheet>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.recent-contacts{display:flex;gap:32px;padding-bottom:25px;border-bottom:.5px solid var(--line);margin-bottom:23px}.recent-contacts button{display:flex;flex-direction:column;gap:9px;align-items:center;font-size:13px;color:var(--muted)}.recent-contacts img{width:52px;height:52px;border-radius:50%}
.share-options{display:flex;gap:30px}.share-options button{font-size:13px;display:flex;flex-direction:column;gap:10px;align-items:center}.round-icon{height:50px;width:50px;border-radius:50%;background:var(--raised);display:grid;place-items:center;color:#fff}
.share-open .sheet-shade{z-index:12}.share-card{display:flex;gap:15px;padding:12px;background:var(--raised);margin-bottom:18px;border-radius:5px}.share-card img{width:64px;height:82px}.share-card>div{display:flex;flex-direction:column;justify-content:center;gap:10px}.share-card strong{font-size:16px}.share-card span{color:var(--muted);font-size:13px}
#share-form{display:flex;flex-direction:column;gap:15px}#share-note{border:1px solid var(--line);background:transparent;padding:12px;border-radius:5px;min-width:0;color:#fff}#share-note::placeholder{color:var(--muted)}#share-form .primary-button{flex:initial}.share-history{margin-top:15px;color:var(--muted);font-size:13px}
.toast{position:absolute;left:50%;bottom:95px;transform:translate(-50%,10px);background:#292929f5;color:#fff;padding:11px 18px;border-radius:6px;z-index:20;max-width:calc(100% - 40px);font-size:13px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 180ms,transform 180ms}.toast.visible{opacity:1;transform:translate(-50%,0)}
.first-enter .clip.entry-clip .author-line{animation:entry-caption 260ms 70ms both}.first-enter .clip.entry-clip .post-caption{animation:entry-caption 280ms 170ms both}.first-enter .clip.entry-clip .action{animation:entry-action 300ms both}
.first-enter .clip.entry-clip .action:nth-child(1){animation-delay:80ms}.first-enter .clip.entry-clip .action:nth-child(2){animation-delay:120ms}.first-enter .clip.entry-clip .action:nth-child(3){animation-delay:160ms}.first-enter .clip.entry-clip .action:nth-child(4){animation-delay:200ms}.first-enter .clip.entry-clip .action:nth-child(5){animation-delay:240ms}
@keyframes entry-caption{from{opacity:0}to{opacity:1}}@keyframes entry-action{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.dragging .feed-top{opacity:0;pointer-events:none}
@media(hover:hover){button:hover{opacity:.88}.work-tile:hover img{transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}.heart-stamp.stamp{animation:none;opacity:1}.video-ready .entry-poster{opacity:1}}
@media(max-height:750px){.feed-meta{bottom:24px}.actions{bottom:24px;gap:16px}.comments-sheet{max-height:77%}.comment-row{margin-bottom:20px}}