* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--line) transparent; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:focus, *:focus-visible { outline: none !important; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: scroll; overflow-x: hidden; zoom: var(--ui-scale, 1); } :root { --zoom-extra: max(0px, calc((var(--ui-scale, 1) - 1) * 300px)); --page-bottom-gutter: calc(100px + var(--zoom-extra)); --bottomnav-clearance: calc( 80px + env(safe-area-inset-bottom) + var(--zoom-extra) ); --vh100: calc(100dvh / var(--ui-scale, 1)); } @media (max-width: 721px) { html[data-nav-style="menu"] { --page-bottom-gutter: calc( 70px + env(safe-area-inset-bottom) + var(--zoom-extra) ); --bottomnav-clearance: calc( 70px + env(safe-area-inset-bottom) + var(--zoom-extra) ); } } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--line); border-radius: var(--radius); border: 2px solid var(--ink); } ::-webkit-scrollbar-thumb:hover { background-color: var(--grey-dim); } @media (max-width: 720px) { *, *:focus, *:focus-visible { outline: none !important; } * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { display: none; width: 0; height: 0; } html { scrollbar-gutter: auto; } } body { margin: 0; background: var(--ink); color: var(--paper); transition: background-color 0.15s ease, color 0.15s ease; font-size: 16px; line-height: 1.6; letter-spacing: -0.011em; font-feature-settings: "cv11", "ss01", "tnum" 0; -webkit-tap-highlight-color: transparent; user-select: none; cursor: default; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } img[hidden] { display: none; } ::selection { background: var(--safelight); color: var(--ink); } :focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; } .mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; border-radius: var(--radius); background: var(--safelight); color: var(--white-color); border: none; font-weight: 600; font-size: 14px; cursor: pointer; transition: filter 0.15s ease, transform 0.05s ease; } .btn:disabled { opacity: 0.55; cursor: default; filter: none; transform: none; } .btn[hidden] { display: none; } .btn-outline { background: transparent; border: 1px solid var(--line-soft); color: var(--paper); } .btn-outline:hover { border-color: var(--line-soft); } .btn-sm { width: auto; padding: 8px 14px; font-size: 14px; } .btn-xs { width: auto; padding: 8px 10px; font-size: 13px; } .btn-auto { width: auto; padding: 9px 18px; } .btn-outline--danger { border-color: var(--safelight); color: var(--safelight); } .btn-danger-outline { background: transparent; border: 1px solid var(--safelight); color: var(--safelight); } .link-accent { color: var(--safelight); } .auto-link { font-style: italic; text-decoration: underline; } .avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-soft); flex-shrink: 0; } .avatar-md { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-soft); flex-shrink: 0; } .avatar-fallback { color: var(--grey-dim); } .nav-avatar-fallback { font-size: 19px; } .avatar-fallback--row { font-size: 26px; } .avatar-fallback--list { font-size: 44px; } .avatar-fallback--creator { font-size: 52px; display: block; margin-bottom: 6px; } .avatar-fallback--edit { font-size: 56px; } .avatar-fallback--profile { font-size: 150px; } .wordmark { font-weight: 800; letter-spacing: 0.02em; font-size: 20px; text-transform: uppercase; } .wordmark .dot { color: var(--safelight); } .logo-mark { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; background: transparent; filter: var(--filter); } @media (min-width: 721px) { .logo-mark { width: 21px; height: 21px; } } .bell, .msg-flag { position: relative; } .badge { position: absolute; top: -7px; right: -9px; background: var(--safelight); color: #fff; font-variant-numeric: tabular-nums; font-size: 9px; font-weight: 700; line-height: 1; padding: 3px 4px; border-radius: 8px; min-width: 14px; text-align: center; } .shell { max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 24px 16px var(--page-bottom-gutter); overflow-x: hidden; } .shell--composer { overflow: visible; } body.suggested-page .shell { max-width: var(--max-w-l); } body.notifications-page .shell { max-width: var(--max-w-l); } body.connections-page .shell { max-width: var(--max-w-l); } .wide-shell { max-width: var(--wide-max-w); width: 100%; margin: 0 auto; padding: 24px 16px var(--page-bottom-gutter); overflow-x: hidden; } @media (min-width: 900px) { .wide-shell { padding: 24px 32px var(--page-bottom-gutter); } } .page-title { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin: 4px 0 20px; } .page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; } .page-title-row .page-title { margin: 0; } .page-back-row { margin: -14px 0 20px; } .page-back-row a { color: var(--grey); font-size: 13px; } .post-back-row { margin: 4px 0 16px; } .post-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--grey); font-size: 14px; font-weight: 600; transition: color 0.15s ease; } .post-back-link i { font-size: 16px; } .post-back-link:hover { color: var(--paper); } .layout-with-rail { display: block; } @media (min-width: 1180px) { .layout-with-rail { display: flex; align-items: flex-start; justify-content: center; gap: var(--rail-gap); max-width: calc(var(--max-w) + var(--rail-gap) + var(--rail-w)); margin: 0 auto; } .layout-with-rail .shell { margin: 0; flex: 0 0 auto; } .rail { flex: 0 0 var(--rail-w); width: var(--rail-w); position: relative; top: 20px; max-height: calc(100vh - 24px - 24px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 24px 4px 24px 6px; display: flex; flex-direction: column; gap: 24px; } } @media (max-width: 1179px) { .rail { display: none; } } .rail-card { padding-top: 12px; } .rail-me { display: flex; align-items: center; gap: 12px; } .rail-me .avatar-sm { width: 44px; height: 44px; } .rail-me .avatar-fallback { font-size: 44px; color: var(--grey-dim); } .rail-me-info { min-width: 0; flex: 1; } .rail-me-name { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-me-username { font-size: 13px; color: var(--grey-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-me-view { font-size: 14px; font-weight: 600; color: var(--safelight); flex-shrink: 0; background: none; border: none; appearance: none; font-family: inherit; cursor: pointer; } .timeline-profile-card { margin-top: 24px; margin-bottom: 20px; } .notif-silence-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; color: var(--grey); cursor: pointer; font-size: 16px; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .notif-silence-btn:disabled { opacity: 0.5; cursor: default; } .notif-silence-btn[hidden] { display: none; } .rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .rail-head span { font-weight: 600; font-size: 13.5px; color: var(--paper); } .rail-head a { font-size: 13px; font-weight: 600; color: var(--paper); } .rail-suggest-row { display: flex; align-items: center; gap: 10px; } .rail-suggest-row + .rail-suggest-row { margin-top: 14px; } .rail-suggest-info { min-width: 0; flex: 1; } .rail-suggest-row .avatar-sm { width: 44px; height: 44px; } .rail-suggest-name { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-suggest-username { font-size: 12.5px; color: var(--grey-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-suggest-mutual { display: flex; align-items: center; gap: 5px; margin-top: 3px; } .mutual-avatar-stack { display: flex; flex-shrink: 0; } .mutual-avatar-stack img, .mutual-avatar-stack i { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); background: var(--ink-raised); } .mutual-avatar-stack i { font-size: 16px; color: var(--grey-dim); } .mutual-avatar-stack img + img, .mutual-avatar-stack img + i, .mutual-avatar-stack i + img, .mutual-avatar-stack i + i { margin-left: -5px; } .rail-suggest-mutual-text { font-size: 11.5px; color: var(--grey-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-suggest-mutual--location { color: var(--grey-dim); font-size: 11.5px; } .rail-suggest-mutual--location i { font-size: 12px; flex-shrink: 0; } .rail-follow-btn { background: transparent; border: none; color: var(--safelight); padding: 0; } .rail-follow-btn.btn-outline { background: transparent; color: var(--paper); } .rail-footer { padding: 12px; font-size: 12px; color: var(--grey-dim); line-height: 1.8; } .rail-footer-links { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; } .rail-footer-links a:not(:last-child)::after { content: "\00b7"; margin-left: 10px; color: var(--grey-dim); } .rail-insights-spark { margin: -2px -4px 12px; } .rail-insights-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .rail-insights-kpi { display: flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; } .rail-insights-kpi i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 7px; background: var(--ink-raised); color: var(--safelight); font-size: 14px; display: flex; align-items: center; justify-content: center; } .rail-insights-kpi div { display: flex; flex-direction: column; min-width: 0; } .rail-insights-kpi b { font-size: 13.5px; font-weight: 700; line-height: 1.2; } .rail-insights-kpi span { font-size: 11px; color: var(--grey-dim); line-height: 1.2; } .rail-timeline-empty { font-size: 13px; color: var(--grey-dim); } .timeline-list { display: flex; flex-direction: column; gap: 14px; } .timeline-item { display: flex; align-items: flex-start; gap: 10px; color: inherit; } .timeline-item-thumb { width: 74px; height: 74px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .timeline-item-info { min-width: 0; flex: 1; padding-top: 1px; } .timeline-item-caption { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .timeline-item-time { display: block; font-size: 12px; color: var(--grey-dim); margin-top: 3px; } .timeline-item-stats { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--grey-dim); margin-top: 3px; } .timeline-item-stats span { display: inline-flex; align-items: center; gap: 3px; } .rail-timeline-spinner { margin-top: 12px; } .rail-timeline-end { margin-top: 12px; font-size: 12px; color: var(--grey-dim); } .sidenav { position: static; z-index: 40; display: flex; align-items: center; padding: 12px 20px; background: var(--ink); } .sidenav-links, .sidenav-bottom, .topbar-actions { display: none; } .topbar-actions { margin-left: auto; display: flex; align-items: center; } .topbar-action { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); color: var(--grey); font-size: 22px; } button.topbar-action { padding: 0; background: none; border: none; appearance: none; cursor: pointer; } .topbar-action i { display: inline-block; transform-origin: center; will-change: transform; transition: 0.3s ease; } .topbar-action i[hidden] { display: none; } .topbar-action:hover i, .topbar-action:focus-visible i { transform: scale(1.05); } .topbar-action.active { color: var(--paper); } .topbar-action .badge { top: -2px; right: -4px; } .guest-topnav { position: static; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: rgba(var(--ink-rgb), 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .guest-topnav-actions { display: flex; align-items: center; gap: 10px; } .guest-topnav-actions .btn, .guest-topnav-actions .btn-outline { width: auto; padding: 8px 16px; } .lnav-mark { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 16px; letter-spacing: 0.04em; color: var(--paper); } .lnav-mark img { border-radius: 6px; } .lnav-mark span { display: inline-block; line-height: 1; } .lnav-mark span b { color: var(--safelight); } @media (min-width: 481px) { .guest-topnav { padding: 14px 28px; } } @media (min-width: 721px) { .sidenav { position: fixed; top: var(--sidenav-gap); left: var(--sidenav-gap); bottom: var(--sidenav-gap); width: var(--sidenav-w); flex-direction: column; align-items: center; padding: 20px 0 16px; } .sidenav-logo { margin-bottom: 18px; } .sidenav-links { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; align-items: center; width: 100%; } .nav-item { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius); color: var(--paper); } button.nav-item { appearance: none; background: none; border: none; cursor: pointer; } .nav-item i { font-size: 18px; display: inline-block; transform-origin: center; will-change: transform; transition: 0.3s ease; } .nav-item i[hidden] { display: none; } .nav-item:hover, .nav-item:focus-visible { background: var(--ink-raised); color: var(--paper); } .nav-item:hover i, .nav-item:focus-visible i { transform: scale(1.05); } .nav-item.active { color: var(--paper); background: var(--ink-raised); } .nav-item.active i { transform: scale(1.05); } .nav-item .badge { top: 4px; right: 4px; } .nav-item--avatar img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-soft); } .nav-item--avatar.active img { border-color: var(--safelight); } .nav-item--avatar .nav-avatar-fallback { font-size: 24px; } .nav-tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); background: var(--ink-raised); color: var(--paper); padding: 7px 12px; border-radius: var(--radius); font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 50; } .nav-item:hover .nav-tip, .nav-item:focus-visible .nav-tip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } .sidenav-bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding-top: 12px; } .sidenav-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 8px; } .sidenav-meta a { font-size: 10px; font-weight: 600; color: var(--grey-dim); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 4px; } .sidenav-meta a:hover { color: var(--grey); } body.has-sidenav { padding-left: calc(var(--sidenav-w) + var(--sidenav-gap) * 2); } .bottomnav { display: none !important; } .topbar-actions { display: none; } } .sidenav-menu-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 290; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, backdrop-filter 0.2s ease; } .sidenav-menu-backdrop.is-open { opacity: 1; visibility: visible; } .sidenav-menu { position: fixed; top: 0; left: 0; height: 100%; width: 320px; max-width: 82vw; background: var(--ink-raised); border-right: 1px solid var(--line); box-shadow: var(--box-shadow); z-index: 295; display: flex; flex-direction: column; padding: 16px 12px 20px; transform: translateX(-110%); transition: transform 0.25s ease; } .sidenav-menu.is-open { transform: translateX(0); } .sidenav-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 14px; margin-bottom: 4px; } .sidenav-menu-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--paper); background: none; border: none; appearance: none; cursor: pointer; font-size: 16px; } .sidenav-menu-close:hover, .sidenav-menu-close:focus-visible { background: var(--line-soft); } .sidenav-menu-list { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; } .sidenav-menu-bottom { margin-top: auto; } .sidenav-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border-radius: var(--radius); font-size: 14px; font-weight: 600; color: var(--paper); background: none; border: none; appearance: none; cursor: pointer; text-align: left; } .sidenav-menu-item i { font-size: 18px; flex-shrink: 0; } .sidenav-menu-item:hover, .sidenav-menu-item:focus-visible { background: var(--line-soft); } .sidenav-menu-item--danger { color: var(--danger-text); } .sidenav-menu-item--staff { color: var(--safelight); } .sidenav-menu-divider { height: 1px; background: var(--line); margin: 4px 2px; } .sidenav-menu-form { display: flex; width: 100%; height: 45px; } .bottomnav { display: none; } @media (max-width: 721px) { .bottomnav { display: flex; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--ink); border-top: 1px solid var(--line); padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); } .bottomnav a { color: var(--grey); font-size: 20px; } .bottomnav a i { display: inline-block; transform-origin: center; will-change: transform; transition: 0.3s ease; } .bottomnav a i[hidden] { display: none; } .bottomnav a:hover i, .bottomnav a:focus-visible i { transform: scale(1.05); } .bottomnav a.active { color: var(--paper); } .bottomnav-avatar img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .bottomnav-avatar.active img { border-color: var(--safelight); } .topbar-actions a.active { color: var(--paper); } html[data-nav-style="menu"] .bottomnav { display: none; } } .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px; background: var(--ink); } .auth-shell { width: 100%; max-width: 1040px; min-height: 620px; display: flex; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } .auth-form-side { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 48px 40px; } .auth-form-inner { width: 100%; max-width: 360px; } .auth-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 32px; } .auth-heading { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; } .auth-subheading { color: var(--grey); font-size: 14px; margin-top: 8px; margin-bottom: 26px; line-height: 1.5; } .auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--grey); } .auth-switch a { color: var(--safelight); font-weight: 600; } .auth-step-indicator { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-dim); margin-bottom: 10px; } .btn-linklike { background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--safelight); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .btn-linklike:hover { text-decoration: underline; } .btn-linklike:disabled { color: var(--grey-dim); cursor: default; text-decoration: none; } .auth-inline-form { text-align: center; margin-top: 16px; } .auth-otp-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .otp-field input { letter-spacing: 0.25em; font-size: 18px; font-weight: 700; text-align: center; text-transform: uppercase; } .field-input-icon { position: relative; display: flex; align-items: center; } .field-input-icon > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--grey-dim); pointer-events: none; } .field .field-input-icon input { padding-left: 38px; } .field .field-input-icon input.has-trailing-icon { padding-right: 38px; } .field-icon-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; color: var(--grey-dim); font-size: 16px; cursor: pointer; border-radius: 6px; } .field-icon-toggle:hover { color: var(--paper); } .field-icon-toggle[disabled] { opacity: 0.35; cursor: not-allowed; } .field-icon-toggle.is-copied { color: var(--green, #2ecc71); } .field-icon-group { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; } .field-icon-group .field-icon-toggle { position: static; transform: none; } .field .field-input-icon input.has-trailing-icon-2 { padding-right: 68px; } input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; } .auth-forgot { text-align: right; margin-top: 8px; } .auth-forgot a { font-size: 13px; font-weight: 600; color: var(--safelight); } .btn-auth { margin-top: 22px; } .btn-auth .ph-arrow-right { font-size: 15px; } .btn-auth-secondary { margin-top: 10px; } .auth-actions-row { display: flex; align-items: stretch; gap: 10px; margin-top: 22px; } .auth-actions-row .btn-auth { margin-top: 0; flex: 1; } .btn-square { flex: 0 0 auto; width: 40px; padding-left: 0; padding-right: 0; } .btn-square i { font-size: 16px; } .save-login-avatar { display: flex; justify-content: center; margin-bottom: 18px; } .save-login-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } .save-login-avatar .avatar-fallback { font-size: 64px; line-height: 1; color: var(--grey-dim); } .save-login-hint { margin-top: 18px; margin-bottom: 0; } .auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--grey-dim); font-size: 12px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .auth-collapsible { overflow: hidden; overflow: clip; overflow-clip-margin: 6px; max-height: 500px; opacity: 1; transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease; } .auth-collapsible.is-collapsed { max-height: 0 !important; opacity: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; pointer-events: none !important; } .remembered-accounts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .remembered-account-form { display: block; } .remembered-account { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.12s ease; } .remembered-account:hover { background: var(--line); } .remembered-account .avatar-sm { flex-shrink: 0; } .remembered-account .avatar-fallback { font-size: 30px; line-height: 1; color: var(--grey-dim); flex-shrink: 0; } .remembered-account > span { flex: 1; min-width: 0; } .remembered-account-name { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .remembered-account-username { display: block; font-size: 13px; color: var(--grey-dim); } .remembered-account > .ph-caret-right { flex-shrink: 0; color: var(--grey-dim); font-size: 14px; } .remembered-accounts-extra { display: flex; flex-direction: column; gap: 8px; } .remembered-accounts-extra[hidden] { display: none; } .remembered-accounts-toggle { text-decoration: none; margin-top: 2px; } .remembered-accounts-toggle:hover { text-decoration: none; } .remembered-accounts-toggle .ph-caret-down { font-size: 12px; transition: transform 0.15s ease; } .remembered-accounts-toggle[aria-expanded="true"] .ph-caret-down { transform: rotate(180deg); } .account-switch-form { flex: 1; min-width: 0; } .blocked-who.as-button { background: none; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; } .auth-visual { display: none; position: relative; flex: 1; min-width: 0; padding: 16px 16px 16px 0; align-items: center; justify-content: center; } .auth-visual-frame { position: relative; width: 100%; max-height: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: radial-gradient( circle at 30% 20%, rgba(var(--ink-rgb), 0.25), transparent 55% ), linear-gradient(160deg, #4d4d4d 0%, #262626 55%, #0a0a0a 100%); } .auth-visual-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .auth-visual-frame img.is-missing { display: none; } .auth-visual-shade { position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 40% ); pointer-events: none; } .auth-visual-meta { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; } .auth-visual-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 30% 30%, #4a4a4a, #1c1c1c) center/cover no-repeat; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); } .auth-visual-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .auth-visual-name { font-size: 14px; font-weight: 600; color: #fff; } .auth-visual-username { font-size: 12px; color: rgba(255, 255, 255, 0.7); } @media (min-width: 860px) { .auth-visual { display: flex; } } @media (max-width: 859px) { .auth-form-side { padding: 40px 24px; } } @media (max-width: 480px) { .auth-page { padding: 0; } .auth-shell { border-radius: 0; border: none; min-height: 100vh; } } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--grey); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; } .field input, .field textarea, .field select { width: 100%; background: var(--input-form); border: 1px solid var(--line); color: var(--paper); padding: 11px 12px; border-radius: var(--radius); font-size: 14px; } .field select { appearance: none; -webkit-appearance: none; } .field-input-locked { background: var(--ink-raised) !important; color: var(--grey-dim) !important; border-color: var(--line) !important; cursor: not-allowed; pointer-events: none; } .field select:focus { border-color: var(--safelight); outline: none; } .privacy-select { border: 1.5px solid var(--line) !important; background-color: var(--input-form); background-image: linear-gradient(45deg, transparent 50%, var(--grey-dim) 50%), linear-gradient(135deg, var(--grey-dim) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding: 12px 36px 12px 14px !important; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .privacy-select:hover { border-color: var(--safelight) !important; background-color: var(--ink-raised); } .privacy-select:focus { border-color: var(--safelight) !important; box-shadow: 0 0 0 3px rgba(var(--safelight-rgb), 0.18); outline: none; } .privacy-select:active { transform: scale(0.995); } .field + .field .privacy-select { margin-top: 2px; } .privacy-select-wrap .privacy-select-native { display: none; } .privacy-select-wrap { position: relative; } .privacy-select-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--input-form); color: var(--paper); padding: 12px 14px; font-size: 14px; font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .privacy-select-chevron { font-size: 14px; color: var(--grey-dim); transition: transform 0.15s ease; flex-shrink: 0; } .privacy-select-toggle.is-open .privacy-select-chevron { transform: rotate(180deg); } .privacy-select-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--box-shadow); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; } .privacy-select-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .privacy-select-item { display: block; width: 100%; background: none; border: none; border-top: 1px solid var(--line-soft); padding: 11px 14px; font-size: 14px; font-family: inherit; text-align: left; color: var(--paper); cursor: pointer; transition: background 0.12s ease; } .privacy-select-item:first-child { border-top: none; } .privacy-select-item:hover, .privacy-select-item:focus-visible { background: var(--line); outline: none; } .privacy-select-item.is-selected { color: var(--safelight); font-weight: 600; } .field textarea { resize: vertical; min-height: 100px; } .field textarea[data-bio-input] { resize: none; padding-right: 40px; } .links-editor-rows { display: flex; flex-direction: column; gap: 8px; } .links-editor-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; } .links-editor-row .links-editor-label, .links-editor-row .links-editor-url { width: 100%; margin: 0; } .links-editor-remove { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--grey); font-size: 15px; cursor: pointer; } .links-editor-remove:hover { background: var(--ink-raised); color: var(--paper); } .links-editor-add { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 480px) { .links-editor-row { grid-template-columns: 1fr 1fr auto; } } .dob-picker { position: relative; } .dob-trigger { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--input-form); border: 1px solid var(--line); color: var(--paper); padding: 11px 12px; border-radius: var(--radius); font-size: 15px; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; } .dob-trigger:hover { border-color: var(--grey-dim); } .dob-trigger i { color: var(--grey); font-size: 18px; flex-shrink: 0; } .dob-popover { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 296px; max-width: calc(100vw - 32px); background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--box-shadow); } .dob-popover[hidden] { display: none; } .field input:focus, .field textarea:focus { border-color: var(--safelight); outline: none; } .caption-input-wrap { position: relative; } .caption-input-wrap textarea[data-autogrow] { resize: none; overflow-y: hidden; max-height: 220px; min-height: 44px; padding-right: 40px; } .caption-input-wrap textarea[data-autogrow].scrolling { overflow-y: auto; } .caption-emoji-toggle { position: absolute; right: 0px; bottom: 8px !important; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: none; border: none; border-radius: var(--radius); color: var(--grey-dim); cursor: pointer; font-size: 20px; } .caption-input-wrap .emoji-picker { left: 0; right: 0; bottom: calc(100% + 8px); } [data-bio-field] .emoji-picker { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; } .field-hint { font-size: 12px; color: var(--grey-dim); margin-top: 5px; } .field-hint--tight { margin: -10px 0 18px; } .field-feedback { display: flex; align-items: center; gap: 5px; font-size: 12px; min-height: 16px; margin-top: 5px; } .field-feedback:empty { margin-top: 0; min-height: 0; } .field-feedback i { font-size: 14px; line-height: 1; } .field-feedback--checking { color: var(--grey-dim); } .field-feedback--checking i { animation: field-feedback-spin 0.8s linear infinite; } .field-feedback--available { color: var(--success-text); } .field-feedback--invalid { color: var(--danger-text); } @keyframes field-feedback-spin { to { transform: rotate(360deg); } } .password-strength { display: flex; align-items: center; gap: 10px; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: opacity 0.18s ease, max-height 0.18s ease, margin-top 0.18s ease; } .password-strength.is-visible { opacity: 1; max-height: 40px; margin-top: 8px; } .password-strength[hidden] { display: none; } .password-strength-track { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; } .password-strength-track > span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 0.15s ease, background-color 0.15s ease; } .strength-weak { background: var(--strength-weak); } .strength-fair { background: var(--strength-fair); } .strength-good { background: var(--strength-good); } .strength-strong { background: var(--strength-strong); } .password-strength-label { font-size: 12px; font-weight: 600; min-width: 40px; text-align: right; } .strength-text-weak { color: var(--strength-weak); } .strength-text-fair { color: var(--strength-fair); } .strength-text-good { color: var(--strength-good); } .strength-text-strong { color: var(--strength-strong); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } } .format-toggle { display: flex; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; gap: 3px; } .format-toggle input[type="radio"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .format-toggle label { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 12px; margin: 0; border-radius: calc(var(--radius) - 3px); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--grey); cursor: pointer; user-select: none; transition: background 0.15s ease, color 0.15s ease; } .format-toggle input[type="radio"]:checked + label { background: var(--safelight); color: var(--white-color); } .format-toggle input[type="radio"]:focus-visible + label { outline: 2px solid var(--safelight); outline-offset: 2px; } input[type="file"] { width: 100%; font-size: 14px; color: var(--grey); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--ink-raised); padding: 9px 10px; cursor: pointer; transition: border-color 0.15s ease; } input[type="file"]:hover { border-color: var(--safelight); } input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button { font-size: 12px; font-weight: 600; color: var(--paper); background: var(--line); border: none; border-radius: var(--radius); padding: 7px 12px; margin-right: 12px; cursor: pointer; transition: background 0.15s ease; } input[type="file"]:hover::file-selector-button, input[type="file"]:hover::-webkit-file-upload-button { background: var(--safelight); } .file-input-hidden { display: none; } .section-label { display: flex; align-items: center; gap: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--grey-dim); margin: 22px 0 12px; } .section-label--flush { margin-top: 0; } .section-label--danger { color: var(--safelight); } .form-error { background: color-mix(in srgb, var(--danger-text) 6%, transparent); border: 1px solid var(--danger-text); border-left-width: 3px; color: var(--danger-text); font-weight: 600; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; } .form-error--spaced { margin-bottom: 20px; } .form-warning { background: color-mix(in srgb, var(--warn-text) 6%, transparent); border: 1px solid var(--line); border-left: 3px solid var(--warn-text); color: var(--warn-text); font-weight: 600; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; } .form-success { background: color-mix(in srgb, var(--success-text) 6%, transparent); border: 1px solid var(--line); border-left: 3px solid var(--success-text); color: var(--success-text); padding: 10px 12px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; } .form-note { font-size: 13px; color: var(--grey); margin-bottom: 14px; } .tag-input { position: relative; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; } .tag-input:focus-within { border-color: var(--safelight); } .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 4px 6px 4px 10px; font-size: 13px; color: var(--paper); } .tag-chip button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; background: transparent; color: var(--grey-dim); cursor: pointer; font-size: 11px; } .tag-chip button:hover { background: var(--line); color: var(--paper); } .tag-input input { width: 100%; background: transparent; border: none; color: var(--paper); padding: 5px 4px; font-size: 14px; } .tag-input input:focus { outline: none; } .tag-suggestions { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 5; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); max-height: 220px; overflow-y: auto; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .tag-suggestion-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: none; cursor: pointer; text-align: left; } .tag-suggestion-row:hover, .tag-suggestion-row:focus { background: var(--line); outline: none; } .tag-suggestion-name { color: var(--paper); font-size: 14px; font-weight: 600; } .tag-suggestion-handle { color: var(--grey-dim); font-size: 13px; } .frame { background: transparent; border: none; animation: frame-in 0.35s ease both; margin: 15px 0; } .frame-photo-wrap { border-radius: var(--radius); overflow: hidden; } @media (max-width: 721px) { body.feed-page .frame-head, body.feed-page .frame-footer { padding-left: 14px; padding-right: 14px; } body.feed-page .frame-info { padding-left: 14px; padding-right: 14px; } } @media (max-width: 480px) { .frame-photo-wrap { border-radius: 0; } body.feed-page .shell { padding-top: 0; padding-left: 0; padding-right: 0; } body.post-page .frame { margin-left: -16px; margin-right: -16px; } .post-back-row { display: none; } } .frame-head { display: flex; align-items: center; gap: 10px; padding: 12px; } .frame-avatar-link { flex-shrink: 0; display: inline-flex; } .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .who-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .frame-head .name { font-weight: 600; font-size: 14px; letter-spacing: -0.005em; } .frame-head .meta { display: inline-flex; align-items: baseline; font-size: 13px; font-weight: 400; color: var(--grey-dim); } .frame-head .meta::before { content: "•"; margin-right: 6px; font-size: 10px; color: var(--grey-dim); } .who-location { font-size: 12.5px; font-weight: 400; color: var(--grey); line-height: 1.3; } .who-suggested { font-size: 12.5px; font-weight: 500; color: var(--grey); line-height: 1.3; } .who-sub { display: grid; overflow: hidden; } .who-sub-item { grid-area: 1 / 1 / 2 / 2; min-width: 0; font-size: 12.5px; font-weight: 400; color: var(--grey); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; } .who-sub-item:nth-child(2) { font-weight: 500; } .who-sub-item.is-active { opacity: 1; transform: translateY(0); } .who-sub-item.is-leaving { opacity: 0; transform: translateY(-4px); } .frame-head .spacer { flex: 1; } .frame-head .time { font-size: 13px; color: var(--grey-dim); font-variant-numeric: tabular-nums; font-weight: 400; } .pin-flag { font-size: 12px; color: var(--safelight); margin-right: 6px; } .frame-follow-btn { width: auto; flex-shrink: 0; padding: 5px 14px; font-size: 13px; background: var(--ink-raised); color: var(--paper); } .frame-follow-btn:hover { filter: brightness(0.94); } .frame-photo { display: block; width: 100%; height: auto; background: var(--ink-raised); cursor: default; } .frame-photo:not([width]) { aspect-ratio: 4 / 5; object-fit: cover; } .frame-photo-wrap { position: relative; display: block; } .frame-media { position: relative; } .frame-tag-toggle { position: absolute; left: 10px; bottom: 10px; z-index: 3; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; color: var(--white-color); background: rgba(10, 10, 10, 0.55); cursor: pointer; background: rgba(0, 0, 0, 0.2); } .frame-tag-toggle:hover, .frame-tag-toggle[aria-pressed="true"] { background: rgba(0, 0, 0, 0.3); } .frame-tag-toggle i { font-size: 14px; } .frame-tag-names { position: absolute; inset: 0; z-index: 2; overflow: hidden; animation: confirm-backdrop-in 0.15s ease; } .frame-tag-names[hidden] { display: none; } .frame-tag-pill { position: absolute; left: 0; top: 0; padding: 5px 10px; border-radius: var(--radius); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 100%); background: rgba(0, 0, 0, 0.4); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .frame-photo.fade-init { opacity: 0; transition: opacity 0.25s ease; } .frame-photo.fade-init.is-loaded { opacity: 1; } .frame-photo-wrap { cursor: default; } .frame-like-burst { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; } .frame-like-burst i { position: relative; font-size: 84px; color: var(--safelight); opacity: 0; transform: scale(0.25); filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 22px rgba(255, 70, 100, 0.55)); will-change: transform, opacity, filter; } .frame-like-burst.is-bursting i { animation: heart-pop 1500ms cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards; } .frame-like-burst::before { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 70, 100, 0.25); opacity: 0; transform: scale(0.2); filter: blur(18px); } .frame-like-burst.is-bursting::before { animation: heart-glow 1500ms ease-out forwards; } @keyframes heart-pop { 0% { opacity: 0; transform: scale(0.25) rotate(-8deg); } 12% { opacity: 1; transform: scale(1.28) rotate(4deg); } 22% { transform: scale(0.92) rotate(-2deg); } 34% { transform: scale(1.08) rotate(1deg); } 48% { transform: scale(1) rotate(0deg); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 35px rgba(255, 70, 100, 0)); } } @keyframes heart-glow { 0% { opacity: 0; transform: scale(0.2); } 20% { opacity: 0.75; transform: scale(1.1); } 55% { opacity: 0.35; transform: scale(1.8); } 100% { opacity: 0; transform: scale(2.6); } } .frame-carousel { cursor: default; } .frame-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .frame-carousel-track::-webkit-scrollbar { display: none; } .frame-carousel-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; } .frame-carousel-slide { flex: 0 0 100%; scroll-snap-align: start; display: block; -webkit-user-drag: none; user-select: none; cursor: inherit; } .frame-carousel-slide img { -webkit-user-drag: none; user-select: none; pointer-events: none; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border: none; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--white-color); background: rgba(0, 0, 0, 0.2); cursor: pointer; transition: background-color 0.15s ease; } .carousel-arrow i { font-size: 14px; } .carousel-arrow:hover { background: rgba(0, 0, 0, 0.3); } .carousel-arrow:focus-visible { outline: 2px solid var(--white-color); outline-offset: 2px; } .carousel-arrow[hidden] { display: none; } .carousel-arrow-prev { left: 10px; } .carousel-arrow-next { right: 10px; } @media (max-width: 721px) { .carousel-arrow { display: none; } } .carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 5px; } .carousel-dots.carousel-dots-inline { position: static; left: auto; bottom: auto; transform: none; justify-content: center; margin: 8px 0 0; } .carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: background 0.15s ease, transform 0.15s ease; } .carousel-dot.is-active { background: var(--white-color); } .carousel-dots-inline .carousel-dot { background: var(--line); } .carousel-dots-inline .carousel-dot.is-active { background: var(--paper); } .lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); animation: lightbox-fade-in 0.18s ease; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); backdrop-filter: blur(50px); } .lightbox[hidden] { display: none; } .lightbox.closing { animation: lightbox-fade-out 0.15s ease forwards; } .lightbox-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 56px 16px; } .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; cursor: default; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); opacity: 0; transform: scale(0.97); transition: opacity 0.18s ease, transform 0.18s ease; } .lightbox-img.is-loaded { opacity: 1; transform: scale(1); } .lightbox-close { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 40px; height: 40px; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 201; background: transparent; border: none; } .lightbox-close { right: max(16px, env(safe-area-inset-right)); font-size: 16px; } .lightbox-bottom-nav { position: fixed; left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; z-index: 201; } .lightbox-bottom-nav[hidden] { display: none; } .lightbox-nav-btn, .lightbox-chat { width: 40px; height: 40px; border-radius: var(--radius); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255, 255, 255, 0.12); border: none; font-size: 16px; transition: background 0.15s ease, opacity 0.15s ease; } .lightbox-nav-btn:hover, .lightbox-chat:hover { background: rgba(255, 255, 255, 0.22); } .lightbox-nav-btn[hidden], .lightbox-chat[hidden] { display: none; } .lightbox-nav-btn:disabled { opacity: 0.35; cursor: default; background: rgba(255, 255, 255, 0.12); } @keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lightbox-fade-out { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox-img { animation: none !important; transition: none !important; } } .frame-footer { padding: 12px; } .frame-info { padding: 0 12px; margin-bottom: 12px; } .frame-liked-by { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--grey); } .frame-liked-by[hidden] { display: none; } .frame-liked-by .mutual-avatar-stack img, .frame-liked-by .mutual-avatar-stack i { width: 20px; height: 20px; font-size: 19px; } .frame-liked-by .mutual-avatar-link + .mutual-avatar-link { margin-left: -6px; } .frame-liked-by-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .frame-liked-by-name, .frame-liked-by-more { font-weight: 600; color: inherit; text-decoration: none; } button.frame-liked-by-more { background: none; border: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; } .frame-liked-by-name:hover, .frame-liked-by-name:focus, .frame-liked-by-name:active, button.frame-liked-by-more:hover, button.frame-liked-by-more:focus, button.frame-liked-by-more:active { text-decoration: none; } .frame-liked-by:not([hidden]) + .frame-caption-wrap .frame-caption, .frame-liked-by:not([hidden]) + .frame-caption-wrap .caption-toggle { margin-top: 4px; } .frame-caption-wrap { display: flex; align-items: baseline; gap: 4px; } .frame-caption { margin-top: 12px; font-size: 14px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; color: var(--grey-deep); font-weight: 400; } .frame-caption .name { font-weight: 600; } .frame-caption.expanded { white-space: normal; overflow: visible; text-overflow: clip; flex: 1 1 100%; } .frame-caption .cap-name { font-weight: 600; margin-right: 6px; } .caption-toggle { flex: 0 0 auto; margin-top: 12px; background: none; border: none; padding: 0; font: inherit; font-size: 14px; color: var(--grey); cursor: pointer; white-space: nowrap; } .caption-toggle:hover { color: var(--paper); } .photo-info-table { width: 100%; margin-top: 12px; border-collapse: collapse; text-transform: uppercase; } .photo-info-table tr { border-bottom: 1px dashed var(--line); } .photo-info-table tr:last-child { border-bottom: none; } .photo-info-table td { padding: 7px 0; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; } .photo-info-label { color: var(--grey-dim); font-weight: 600; width: 1%; padding-right: 24px; } .photo-info-value { color: var(--paper); font-weight: 300; text-align: right; width: 100%; } .photo-info-empty { margin-top: 12px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey-dim); } .frame-actions { display: flex; align-items: center; gap: 18px; } .frame-actions .spacer { flex: 1; } .act-btn { background: none; border: none; color: var(--grey); cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 4px 0; transition: color 0.15s ease; } .act-btn:hover { color: var(--paper); } .act-btn.liked, .act-btn.saved { color: var(--safelight); } .act-btn i { font-size: 22px; } .act-btn .ph-paper-plane-tilt { font-size: 20px; } .act-count { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; } .act-group { display: flex; align-items: center; gap: 6px; } .act-count-link { background: none; border: none; padding: 0; color: var(--grey); cursor: pointer; transition: color 0.15s ease; } .act-count-link:hover { color: var(--paper); text-decoration: underline; } .act-count-link.liked { color: var(--safelight); } .collab-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .collab-modal[hidden] { display: none; } .collab-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .collab-modal.closing .collab-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .collab-modal-card { position: relative; z-index: 1; width: 100%; max-width: 360px; max-height: 80vh; display: flex; flex-direction: column; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--box-shadow); animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); overflow: hidden; } .collab-modal.closing .collab-modal-card { animation: confirm-card-out 0.15s ease forwards; } .likes-modal .collab-modal-card, .shares-modal .collab-modal-card, .photo-info-modal .collab-modal-card { max-width: 520px; } .collab-modal-grabber { display: none; } .collab-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .collab-modal-title { font-size: 16px; font-weight: 700; color: var(--paper); margin: 0; } .collab-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--grey); font-size: 18px; background: transparent; border: none; cursor: pointer; } .collab-modal-close:hover { background: var(--ink-raised); color: var(--paper); } .collab-modal-list { padding: 4px 20px 8px; overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; } .collab-modal-list .user-list-row { padding: 10px 0; } .collab-modal-list .user-list-row:last-child { border-bottom: none; } .likes-modal-loading, .likes-modal-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; color: var(--grey-dim); text-align: center; } .likes-modal-loading i, .likes-modal-empty i { font-size: 26px; } .spin-icon { animation: composer-post-spin 0.8s linear infinite; } .likes-modal-more { display: block; width: 100%; padding: 10px 0 6px; background: none; border: none; color: var(--safelight); font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; } .likes-modal-more:hover { text-decoration: underline; } .likes-modal-more:disabled { opacity: 0.5; cursor: default; text-decoration: none; } .likes-modal-list .user-list-row:hover { background: none; } @media (max-width: 600px) { .likes-modal, .shares-modal, .photo-info-modal { align-items: flex-end; padding: 0; } .likes-modal .collab-modal-card, .shares-modal .collab-modal-card, .photo-info-modal .collab-modal-card { max-width: none; max-height: 82dvh; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .likes-modal.closing .collab-modal-card, .shares-modal.closing .collab-modal-card, .photo-info-modal.closing .collab-modal-card { animation: share-sheet-out 0.16s ease forwards; } .likes-modal .collab-modal-grabber, .shares-modal .collab-modal-grabber, .photo-info-modal .collab-modal-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--radius); background: var(--line); } } @media (prefers-reduced-motion: reduce) { .likes-modal .collab-modal-card, .shares-modal .collab-modal-card, .photo-info-modal .collab-modal-card { animation: none !important; } } .confirm-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .confirm-modal[hidden] { display: none; } .confirm-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .confirm-modal.closing .confirm-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .confirm-modal-card { position: relative; z-index: 1; width: 100%; max-width: 340px; background: var(--input-form); border: 1px solid var(--line); border-radius: 16px; padding: 26px 20px 20px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .confirm-modal.closing .confirm-modal-card { animation: confirm-card-out 0.15s ease forwards; } .confirm-modal-icon { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink-raised); color: var(--grey); font-size: 22px; } .confirm-modal-icon.danger { background: color-mix(in srgb, var(--safelight) 12%, transparent); color: var(--safelight); } .confirm-modal-title { font-size: 16px; font-weight: 700; color: var(--paper); margin: 0 0 6px; line-height: 1.3; } .confirm-modal-message { font-size: 13.5px; color: var(--grey); line-height: 1.5; margin: 0 0 22px; } .confirm-modal-actions { display: flex; gap: 10px; } .confirm-modal-actions .btn { width: auto; flex: 1; } @keyframes confirm-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes confirm-backdrop-out { to { opacity: 0; } } @keyframes confirm-card-in { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes confirm-card-out { to { opacity: 0; transform: scale(0.95) translateY(4px); } } @media (prefers-reduced-motion: reduce) { .confirm-modal-backdrop, .confirm-modal-card { animation: none !important; } } .switch-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .switch-modal[hidden] { display: none; } .switch-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .switch-modal.closing .switch-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .switch-modal-backdrop[hidden] { display: none; } .switch-modal-card { position: relative; z-index: 1; width: 100%; max-width: 400px; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); overflow: hidden; animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .switch-modal.closing .switch-modal-card { animation: confirm-card-out 0.15s ease forwards; } .switch-modal-grabber { display: none; } .switch-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 14px 18px; border-bottom: 1px solid var(--line); } .switch-modal-title { font-size: 15px; font-weight: 700; color: var(--paper); margin: 0; } .switch-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--grey); font-size: 18px; background: transparent; border: none; cursor: pointer; } .switch-modal-close:hover { background: var(--ink-raised); color: var(--paper); } .switch-modal-list { max-height: 50vh; overflow-y: auto; padding: 6px 0; } .switch-modal-row-form { display: contents; } .switch-modal-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-align: left; background: none; border: none; appearance: none; font: inherit; cursor: pointer; } .switch-modal-row:hover { background: var(--ink-raised); } .switch-modal-row .avatar-sm, .switch-modal-row .avatar-fallback { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; } .switch-modal-row .avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--grey-dim); } .switch-modal-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .switch-modal-check { flex-shrink: 0; font-size: 18px; color: var(--success-text); } .switch-modal-add { display: block; text-align: center; padding: 14px 16px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--paper); } .switch-modal-add:hover { background: var(--ink-raised); } .switch-modal-note { padding: 14px 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--grey-dim); text-align: center; } .switch-modal-note .link { color: var(--safelight); } @media (max-width: 600px) { .switch-modal { align-items: flex-end; padding: 0; } .switch-modal-card { max-width: none; max-height: 82dvh; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .switch-modal.closing .switch-modal-card { animation: share-sheet-out 0.16s ease forwards; } .switch-modal-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--radius); background: var(--line); } } @media (prefers-reduced-motion: reduce) { .switch-modal-backdrop, .switch-modal-card { animation: none !important; } } .comment-actions-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .comment-actions-modal[hidden] { display: none; } .comment-actions-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .comment-actions-modal.closing .comment-actions-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .comment-actions-card { position: relative; z-index: 1; width: 100%; max-width: 270px; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .comment-actions-modal.closing .comment-actions-card { animation: confirm-card-out 0.15s ease forwards; } .comment-actions-item { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); padding: 14px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--paper); text-align: center; cursor: pointer; } .comment-actions-item:last-child { border-bottom: none; } .comment-actions-item[hidden] { display: none; } .comment-actions-item:focus-visible { outline-offset: -2px; } .comment-actions-item:hover:not(:disabled) { background: var(--ink-raised); } .comment-actions-item:disabled { opacity: 0.6; cursor: default; } .comment-actions-item.danger { color: var(--danger-text); } .comment-actions-item.cancel { color: var(--grey); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .comment-actions-backdrop, .comment-actions-card { animation: none !important; } } .message-actions-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .message-actions-modal[hidden] { display: none; } .message-actions-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .message-actions-modal.closing .message-actions-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .message-actions-card { position: relative; z-index: 1; width: 100%; max-width: 270px; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .message-actions-modal.closing .message-actions-card { animation: confirm-card-out 0.15s ease forwards; } .message-actions-item { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); padding: 14px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--paper); text-align: center; cursor: pointer; } .message-actions-item:last-child { border-bottom: none; } .message-actions-item[hidden] { display: none; } .message-actions-item:hover:not(:disabled) { background: var(--ink-raised); } .message-actions-item:disabled { opacity: 0.6; cursor: default; } .message-actions-item.danger { color: var(--danger-text); } .message-actions-item.cancel { color: var(--grey); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .message-actions-backdrop, .message-actions-card { animation: none !important; } } .edit-message-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .edit-message-modal[hidden] { display: none; } .edit-message-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .edit-message-modal.closing .edit-message-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .edit-message-card { position: relative; z-index: 1; width: 100%; max-width: 380px; max-height: 85vh; margin: 12px; display: flex; flex-direction: column; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--box-shadow); overflow: hidden; animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .edit-message-modal.closing .edit-message-card { animation: confirm-card-out 0.15s ease forwards; } .edit-message-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .edit-message-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--grey); font-size: 18px; background: transparent; border: none; cursor: pointer; flex-shrink: 0; } .edit-message-close:hover { background: var(--ink-raised); color: var(--paper); } .edit-message-title { font-size: 15px; font-weight: 700; color: var(--paper); margin: 0; } .edit-message-preview { flex: 1; min-height: 130px; padding: 22px 16px; overflow-y: auto; background: var(--ink); display: flex; flex-direction: column; justify-content: center; } .edit-message-preview .bubble-row { margin: 0; } .edit-message-preview .bubble-wrap { max-width: 85%; } .edit-message-preview .bubble { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .edit-message-composer { display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); flex-shrink: 0; } .edit-message-input { flex: 1; max-height: 120px; padding: 9px 14px; border: none; border-radius: var(--radius); background: var(--ink-raised); color: var(--paper); font: inherit; font-size: 14.5px; line-height: 1.4; resize: none; } .edit-message-input:focus { outline: none; } .edit-message-confirm { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); border: none; background: var(--safelight); color: #fff; font-size: 16px; cursor: pointer; flex-shrink: 0; } .edit-message-confirm:hover:not(:disabled) { filter: brightness(1.08); } .edit-message-confirm:disabled { opacity: 0.5; cursor: default; } @media (prefers-reduced-motion: reduce) { .edit-message-backdrop, .edit-message-card { animation: none !important; } } .qr-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .qr-modal[hidden] { display: none; } .qr-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .qr-modal.closing .qr-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .qr-modal-card { position: relative; z-index: 1; width: 100%; max-width: 340px; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); overflow: hidden; animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .qr-modal.closing .qr-modal-card { animation: confirm-card-out 0.15s ease forwards; } .qr-modal-grabber { display: none; } .qr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 14px 18px; border-bottom: 1px solid var(--line); } .qr-modal-title { font-size: 15px; font-weight: 700; color: var(--paper); margin: 0; } .qr-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--grey); font-size: 18px; background: transparent; border: none; cursor: pointer; } .qr-modal-close:hover { background: var(--ink-raised); color: var(--paper); } .qr-modal-body { padding: 24px 20px 6px; text-align: center; } .qr-modal-canvas-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto; border-radius: 12px; overflow: hidden; } .qr-modal-canvas { display: block; width: 220px; height: 220px; border-radius: 12px; } .qr-modal-avatar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; border: 3px solid #ffffff; background: #ffffff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .qr-modal-avatar-img { width: 100%; height: 100%; object-fit: cover; } .qr-modal-avatar-fallback { font-size: 28px; color: var(--grey-dim); } .qr-modal-name { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--paper); } .qr-modal-hint { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--grey); } .qr-modal-actions { display: flex; gap: 10px; padding: 18px 20px 20px; } .qr-modal-actions .btn { width: auto; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; } @media (max-width: 600px) { .qr-modal { align-items: flex-end; padding: 0; } .qr-modal-card { max-width: none; max-height: 82dvh; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .qr-modal.closing .qr-modal-card { animation: share-sheet-out 0.16s ease forwards; } .qr-modal-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--radius); background: var(--line); } } @media (prefers-reduced-motion: reduce) { .qr-modal-backdrop, .qr-modal-card { animation: none !important; } } .links-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .links-modal[hidden] { display: none; } .links-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .links-modal.closing .links-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .links-modal-card { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); overflow: hidden; animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .links-modal.closing .links-modal-card { animation: confirm-card-out 0.15s ease forwards; } .links-modal-grabber { display: none; } .links-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 14px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .links-modal-title { font-size: 15px; font-weight: 700; color: var(--paper); margin: 0; } .links-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--grey); font-size: 18px; background: transparent; border: none; cursor: pointer; } .links-modal-close:hover { background: var(--ink-raised); color: var(--paper); } .links-modal-body { overflow-y: auto; padding: 6px 0; } .links-modal-item { display: flex; align-items: center; gap: 10px; padding: 12px 18px; color: var(--paper); text-decoration: none; font-size: 14px; font-weight: 600; } .links-modal-item:hover { background: var(--ink-raised); } .links-modal-item i { color: var(--grey); font-size: 16px; flex-shrink: 0; } .links-modal-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 600px) { .links-modal { align-items: flex-end; padding: 0; } .links-modal-card { max-width: none; max-height: 82dvh; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .links-modal.closing .links-modal-card { animation: share-sheet-out 0.16s ease forwards; } .links-modal-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--radius); background: var(--line); } } @media (prefers-reduced-motion: reduce) { .links-modal-backdrop, .links-modal-card { animation: none !important; } } .avatar-sheet { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .avatar-sheet[hidden] { display: none; } .avatar-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .avatar-sheet.closing .avatar-sheet-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .avatar-sheet-card { position: relative; z-index: 1; width: 100%; max-width: 340px; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); overflow: hidden; animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .avatar-sheet.closing .avatar-sheet-card { animation: confirm-card-out 0.15s ease forwards; } .avatar-sheet-grabber { display: none; } .avatar-sheet-body { padding: 6px 0; } .avatar-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; background: none; border: none; border-bottom: 1px solid var(--line); text-align: left; font-size: 14.5px; font-weight: 600; color: var(--paper); cursor: pointer; } .avatar-sheet-item:last-of-type { border-bottom: none; } .avatar-sheet-item[hidden] { display: none; } .avatar-sheet-item:hover { background: var(--ink-raised); } .avatar-sheet-cancel { width: 100%; padding: 14px 20px; background: none; border: none; border-top: 1px solid var(--line); text-align: center; font-size: 14.5px; font-weight: 700; color: var(--grey); cursor: pointer; } .avatar-sheet-cancel:hover { background: var(--ink-raised); color: var(--paper); } @media (max-width: 600px) { .avatar-sheet { align-items: flex-end; padding: 0; } .avatar-sheet-card { max-width: none; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .avatar-sheet.closing .avatar-sheet-card { animation: share-sheet-out 0.16s ease forwards; } .avatar-sheet-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--radius); background: var(--line); } } @media (prefers-reduced-motion: reduce) { .avatar-sheet-backdrop, .avatar-sheet-card { animation: none !important; } } .profile-photo-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .profile-photo-modal[hidden] { display: none; } .profile-photo-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .profile-photo-modal.closing .profile-photo-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .profile-photo-modal-card { position: relative; z-index: 1; width: 100%; max-width: 340px; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); overflow: hidden; animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .profile-photo-modal.closing .profile-photo-modal-card { animation: confirm-card-out 0.15s ease forwards; } .profile-photo-modal-grabber { display: none; } .profile-photo-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 14px 18px; border-bottom: 1px solid var(--line); } .profile-photo-modal-title { font-size: 15px; font-weight: 700; color: var(--paper); margin: 0; } .profile-photo-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--grey); font-size: 18px; background: transparent; border: none; cursor: pointer; } .profile-photo-modal-close:hover { background: var(--ink-raised); color: var(--paper); } .profile-photo-modal-body { text-align: center; } .profile-photo-modal-frame { position: relative; width: 100%; margin: 0 auto; overflow: hidden; background: var(--ink-raised); display: flex; align-items: center; justify-content: center; } .profile-photo-modal-img { display: block; width: 100%; height: 100%; object-fit: cover; } .profile-photo-modal-fallback { font-size: 90px; color: var(--grey-dim); } @media (max-width: 600px) { .profile-photo-modal { align-items: flex-end; padding: 0; } .profile-photo-modal-card { max-width: none; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .profile-photo-modal.closing .profile-photo-modal-card { animation: share-sheet-out 0.16s ease forwards; } .profile-photo-modal-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--radius); background: var(--line); } } @media (prefers-reduced-motion: reduce) { .profile-photo-modal-backdrop, .profile-photo-modal-card { animation: none !important; } } .report-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .report-modal[hidden] { display: none; } .report-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .report-modal.closing .report-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .report-modal-card { position: relative; z-index: 1; width: 100%; max-width: 360px; max-height: 85vh; display: flex; flex-direction: column; background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--box-shadow); animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); overflow: hidden; } .report-modal.closing .report-modal-card { animation: confirm-card-out 0.15s ease forwards; } .report-modal-grabber { display: none; } .report-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .report-modal-title { font-size: 16px; font-weight: 700; color: var(--paper); margin: 0; } .report-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--grey); font-size: 18px; background: transparent; border: none; cursor: pointer; } .report-modal-close:hover { background: var(--ink-raised); color: var(--paper); } .report-modal-body { padding: 16px 20px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .report-modal-sub { font-size: 13.5px; color: var(--grey); line-height: 1.5; margin: 0 0 14px; } .report-reason-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .report-reason-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); padding: 13px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--paper); text-align: left; cursor: pointer; } .report-reason-item:last-child { border-bottom: none; } .report-reason-item:hover { background: var(--ink-raised); } .report-reason-item i { color: var(--grey); font-size: 14px; flex-shrink: 0; } .report-modal-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--grey); font: inherit; font-size: 13px; font-weight: 600; padding: 0 0 12px; cursor: pointer; } .report-modal-back:hover { color: var(--paper); } .report-char-count { display: flex; justify-content: flex-end; gap: 12px; text-align: right; font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; margin: -8px 0 16px; } [data-report-submit]:disabled { opacity: 0.5; cursor: not-allowed; } .caption-char-count { text-align: right; font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; margin: 4px 2px 0; } .caption-char-count.char-count-limit { color: var(--danger-text); } .report-done-icon { width: 48px; height: 48px; margin: 4px auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--success-text) 12%, transparent); color: var(--success-text); font-size: 24px; } .report-modal-done { text-align: center; } .report-modal-done .report-modal-sub { margin-bottom: 20px; } @media (max-width: 600px) { .report-modal { align-items: flex-end; padding: 0; } .report-modal-card { max-width: none; max-height: 82dvh; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .report-modal.closing .report-modal-card { animation: share-sheet-out 0.16s ease forwards; } .report-modal-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--radius); background: var(--line); } } @media (prefers-reduced-motion: reduce) { .report-modal-backdrop, .report-modal-card { animation: none !important; } } .comments { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-raised) transparent; } .comments::-webkit-scrollbar { width: 6px; } .comments::-webkit-scrollbar-track { background: transparent; } .comments::-webkit-scrollbar-thumb { background: var(--ink-raised); border-radius: 999px; } .comment-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; padding: 6px 8px; border-radius: var(--radius); transition: background 0.15s ease; } .comment-row.comment-flash { animation: comment-flash 2.4s ease-out; } @keyframes comment-flash { 0%, 60% { background: rgba(var(--safelight-rgb), 0.16); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .comment-row.comment-flash { animation: none; background: rgba(var(--safelight-rgb), 0.16); } } .comment-row .c-avatar { flex-shrink: 0; margin-top: 1px; } .comment-row .c-avatar .avatar-sm { width: 24px; height: 24px; } .comment-row .c-avatar .avatar-fallback { font-size: 22px; line-height: 1; } .comment-row .c-body-col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .comment-row .c-content { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; } .comment-row .c-name { font-weight: 600; flex-shrink: 0; } .comment-row .c-image-link { flex-basis: 100%; display: block; } .comment-row .c-image { display: block; max-width: 180px; max-height: 180px; width: auto; height: auto; border-radius: var(--radius); object-fit: cover; margin: 2px 0; } .comment-row .c-body-wrap { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .comment-row .c-body { color: var(--text-soft); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .comment-row .c-body.expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .comment-row:not(.pm-caption-row) .c-body { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .comment-row .c-body .mention { color: var(--safelight); } .bubble .mention { color: var(--safelight); text-decoration: none !important; } .bubble-row.mine .bubble .mention { color: #fff; text-decoration: underline; } .frame-caption-wrap .mention { color: var(--safelight); } .comment-row .c-body .hashtag, .frame-caption-wrap .hashtag, .photo-lb-caption .hashtag { color: var(--safelight); } .comment-row .c-more-toggle { background: none; border: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--grey); cursor: pointer; } .comment-row .c-more-toggle:hover { color: var(--paper); } .comment-row .c-subrow { display: flex; align-items: center; gap: 10px; } .comment-row .c-time { color: var(--grey-dim); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .comment-row .c-reply-link { background: none; border: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--grey-dim); cursor: pointer; } .comment-row .c-menu-btn { background: none; border: none; padding: 2px 4px; margin: -2px 0; border-radius: 4px; color: var(--grey-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease; } .comment-row:hover .c-menu-btn, .comment-row:focus-within .c-menu-btn, .comment-row .c-menu-btn.menu-open { opacity: 1; } .comment-row .c-menu-btn:hover, .comment-row .c-menu-btn.menu-open { background: var(--ink-raised); color: var(--paper); } @media (pointer: coarse) { .comment-row .c-menu-btn { display: none; } } .c-replies-wrap { margin-left: 32px; } .view-replies-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--grey-dim); cursor: pointer; } .view-replies-toggle:hover { color: var(--paper); } .c-replies { display: flex; flex-direction: column; gap: 2px; } .c-replies[hidden] { display: none; } .comment-row.reply-row .c-avatar .avatar-sm, .comment-row.reply-row .c-avatar .avatar-fallback { width: 20px; height: 20px; font-size: 19px; } .reply-banner { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--grey-dim); } .reply-banner[hidden] { display: none; } .reply-banner span { color: var(--safelight); font-weight: 600; } .reply-banner-cancel { background: none; border: none; color: var(--grey-dim); cursor: pointer; padding: 2px; display: flex; align-items: center; } .reply-banner-cancel:hover { color: var(--paper); } .comment-row.entering { animation: row-in 0.2s ease; } .comment-row .c-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: 4px; align-self: flex-start; } .comment-row .c-act { background: none; border: none; color: var(--paper); cursor: pointer; padding: 4px; display: flex; align-items: left; width: 40px; font-size: 15px; transition: color 0.15s ease, background 0.15s ease; } .comment-row .c-act.c-love.loved { color: var(--safelight); } .comment-row .c-act.c-love .c-love-count { font-size: 11px; font-weight: 700; margin-left: 2px; font-variant-numeric: tabular-nums; } .comment-row .c-loved-flag { color: var(--safelight); font-size: 13px; flex-shrink: 0; margin-left: 4px; display: inline-flex; align-items: center; gap: 2px; } .comment-row .c-pin-flag { color: var(--safelight); font-size: 12px; flex-shrink: 0; } .comment-row.pinned { background: var(--ink-raised); } .comment-row.leaving { animation: row-out 0.18s ease forwards; } @keyframes row-out { to { opacity: 0; transform: translateX(4px); } } .comment-form { position: relative; display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; padding: 4px 4px 4px 8px; border-radius: var(--radius); background: var(--ink-raised); border: 1px solid var(--line); transition: border-color 0.15s ease; } .comment-form[hidden] { display: none; } .comment-form:focus-within { border-color: var(--safelight); } .comment-form .composer-attach { padding-bottom: 2px; } .comment-input { flex: 1; min-width: 0; background: transparent; color: var(--paper); padding: 8px 0; font-size: 14px; line-height: 1.4; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; max-height: 120px; overflow-y: hidden; } .comment-input.scrolling { overflow-y: auto; } .comment-input.is-empty::before { content: attr(data-placeholder); color: var(--grey-dim); pointer-events: none; } .comment-input .mention-chip { display: inline-flex; align-items: center; background: var(--safelight); color: var(--white-color); border-radius: var(--radius); padding: 1px 9px; margin: 0 1px; font-weight: 600; font-size: 13px; line-height: 1.6; white-space: nowrap; user-select: none; } .comment-form > button[type="submit"] { background: var(--safelight); color: #fff; border: none; border-radius: var(--radius); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; transition: filter 0.15s ease, opacity 0.15s ease; } .comment-form > button[type="submit"]:hover:not(:disabled) { filter: brightness(1.08); } .comment-form > button[type="submit"]:disabled { opacity: 0.5; cursor: default; } .mention-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 35; max-height: 240px; overflow-y: auto; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--box-shadow); padding: 6px; } .mention-menu[hidden] { display: none; } .mention-menu--below { bottom: auto; top: calc(100% + 8px); } .mention-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; background: none; border: none; border-radius: var(--radius); cursor: pointer; text-align: left; } .mention-menu-item:hover { background: var(--ink); } .mention-menu-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--grey-dim); font-size: 18px; } .mention-menu-avatar img { width: 100%; height: 100%; object-fit: cover; } .mention-menu-names { display: flex; flex-direction: column; min-width: 0; } .mention-menu-username { font-size: 13px; font-weight: 600; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mention-menu-display { font-size: 12px; color: var(--grey-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hashtag-menu-icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--safelight); font-size: 14px; font-weight: 700; } .hashtag-menu-names { display: flex; flex-direction: column; min-width: 0; } .hashtag-menu-tag { font-size: 13px; font-weight: 600; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hashtag-menu-count { font-size: 12px; color: var(--grey-dim); } .hashtag-page-hash { color: var(--paper); } #location-field-wrap input, #alt-field-wrap input { background: var(--ink-raised); } .location-suggest { position: relative; } .location-suggest-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 35; max-height: 140px; overflow-y: auto; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--box-shadow); padding: 6px; } .location-suggest-menu[hidden] { display: none; } .location-suggest-item { display: block; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: var(--radius); cursor: pointer; text-align: left; font-size: 14px; line-height: 1.4; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .location-suggest-item:hover, .location-suggest-item.active { background: var(--ink); } .location-suggest-item mark { background: none; color: var(--safelight); font-weight: 700; padding: 0; margin: 0; } .location-suggest-country { color: var(--grey-dim); } .owner-menu { position: relative; } .owner-menu-toggle { padding: 4px 6px; } .owner-menu-toggle i { font-size: 20px; } .owner-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); min-width: 180px; overflow: hidden; box-shadow: var(--box-shadow); } .owner-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: none; border: none; text-align: left; font-size: 14px; color: var(--paper); cursor: pointer; transition: background 0.12s ease; } .owner-menu-item i { width: 14px; text-align: center; color: var(--grey-dim); } .owner-menu-item:hover { background: var(--line); } .owner-menu-item.danger { color: var(--danger-text); } .owner-menu-item.danger i { color: var(--danger-text); } .topbar-menu .owner-menu-toggle { padding: 0; } .topbar-menu .owner-menu-toggle i { font-size: 24px; } .topbar-menu .owner-menu-panel { min-width: 200px; z-index: 60; } .topbar-menu-form { display: block; margin: 0; } .owner-menu-divider { border-top: 1px solid var(--line); } .owner-menu-item--staff, .owner-menu-item--staff i { color: var(--safelight); } .owner-menu-icons { display: none; } html[data-nav-style="menu"] .owner-menu-icons { display: block; } .owner-menu-icons-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 10px 14px 12px; } .owner-menu-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); color: var(--grey); font-size: 20px; transition: background 0.12s ease, color 0.12s ease; } .owner-menu-icon:hover { background: var(--line); color: var(--paper); } .owner-menu-icon.active { color: var(--safelight); } .owner-menu-icon img { display: block; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .owner-menu-icon .badge { top: -2px; right: -2px; } @media (min-width: 721px) { .mobile-nav-setting { display: none; } } .capsule-setting { display: none; } @media (min-width: 1180px) { .capsule-setting { display: block; } } .owner-menu-item-dot { margin-left: auto; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--safelight); } .owner-menu-toggle-dot { display: none; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--safelight); border: 1.5px solid var(--ink); } html[data-nav-style="menu"] .owner-menu-toggle-dot:not([hidden]) { display: block; } .profile-head { position: relative; display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; margin-top: 30px; max-width: var(--max-w-l); width: 100%; margin-inline: auto; } .profile-menu { position: absolute; top: 0; right: 0; z-index: 20; } @media (max-width: 720px) { .profile-menu { display: none; } .profile-tab-label { display: none; } } .profile-head-row { display: flex; align-items: flex-start; gap: 18px; } .profile-head-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .profile-avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-soft); flex-shrink: 0; } .profile-avatar-wrap { position: relative; flex-shrink: 0; width: 150px; height: 150px; cursor: pointer; border-radius: 50%; } .profile-avatar-wrap .profile-avatar, .profile-avatar-wrap .avatar-fallback--profile { width: 100%; height: 100%; } .avatar-camera-btn { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--ink); background: var(--safelight); color: var(--white-color); cursor: pointer; z-index: 5; } .avatar-camera-btn i { font-size: 13px; } .avatar-camera-btn:hover { filter: brightness(1.08); } .avatar-camera-btn:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; } .avatar-camera-btn.avatar-camera-btn--sm { width: 22px; height: 22px; right: -2px; bottom: -2px; border-width: 2px; } .avatar-camera-btn--sm i { font-size: 11px; } .profile-name { font-weight: 700; font-size: 20px; overflow-wrap: anywhere; margin: 0; } .profile-username { color: var(--paper); font-size: 14px; letter-spacing: 0.01em; } .profile-location { color: var(--paper); font-size: 14px; letter-spacing: 0.01em; } .profile-category { margin-top: 18px; color: var(--grey-dim); font-size: 14px; } .profile-bio { font-size: 14px; color: var(--paper); white-space: pre-line; overflow-wrap: anywhere; } .profile-links { display: flex; align-items: center; flex-wrap: wrap; column-gap: 4px; font-size: 14px; color: var(--grey); letter-spacing: 0.02em; font-weight: 600; } .profile-links i { margin-right: 5px; color: var(--grey); } .profile-link { color: var(--paper); text-decoration: none; } .profile-links-more { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--paper); cursor: pointer; } .profile-followed-by { display: flex; align-items: center; gap: 6px; } .profile-followed-by .mutual-avatar-stack img, .profile-followed-by .mutual-avatar-stack i { width: 32px; height: 32px; font-size: 30px; } .profile-followed-by-text { font-size: 14px; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 480px) { .profile-followed-by-text { max-width: 300px; } } .mutual-avatar-link { display: inline-flex; flex-shrink: 0; border-radius: 50%; } .mutual-avatar-link + .mutual-avatar-link { margin-left: -8px; } .profile-followed-by-link { color: inherit; font-weight: 600; text-decoration: none; } .profile-followed-by-more { color: var(--grey-dim); font-size: 13px; } .profile-stats { display: flex; gap: 18px; font-size: 14px; margin-top: 6px; } .profile-stats b { font-weight: 600; font-variant-numeric: tabular-nums; } .profile-stats span { color: var(--paper); } .profile-stats a:hover span { color: var(--paper); } .profile-actions { display: flex; gap: 8px; width: 100%; margin-top: 12px; } .profile-actions .btn { flex: 1 1 0; width: auto; height: 40px; } .profile-actions a:hover { border-color: var(--line); } @media (max-width: 721px) { .profile-head { gap: 14px; margin-top: 20px; } .profile-head-row { flex-direction: column; align-items: center; text-align: center; gap: 10px; } .profile-avatar, .profile-avatar-wrap { width: 96px; height: 96px; } .avatar-fallback--profile { font-size: 96px; } .avatar-camera-btn { width: 26px; height: 26px; right: 1px; bottom: 1px; } .avatar-camera-btn i { font-size: 12px; } .profile-head-text { align-items: center; width: 100%; } .profile-stats { justify-content: center; gap: 20px; } .profile-actions .btn { padding: 8px 10px; } } @media (max-width: 480px) { .profile-avatar, .profile-avatar-wrap { width: 76px; height: 76px; } .avatar-fallback--profile { font-size: 76px; } .avatar-camera-btn { right: -2px; bottom: -2px; } .profile-name { font-size: 18px; } } .avatar-edit-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .avatar-edit-row .profile-avatar { width: 56px; height: 56px; } .avatar-edit-row .field { margin: 0; flex: 1; min-width: 0; } .profile-avatar-wrap--edit { width: 56px; height: 56px; flex-shrink: 0; } .avatar-edit-row .upload-overlay { padding: 0; border-radius: 50%; } .avatar-edit-row .upload-overlay .upload-spinner { width: 18px; height: 18px; border-width: 2px; } .profile-tabs { display: flex; margin-top: 26px; max-width: var(--max-w-l); width: 100%; margin-inline: auto; } .profile-tab { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: none; border: none; padding: 13px 0; color: var(--grey-dim); cursor: pointer; transition: color 0.15s ease; } .profile-tab i { font-size: 20px; } .profile-tab-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .profile-tab:hover { color: var(--grey); } .profile-tab.active { color: var(--paper); } .profile-tab.active::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 100%; height: 2px; background: var(--paper); } .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 22px; min-width: 0; } .sheet-grid a { aspect-ratio: 1; overflow: hidden; background: var(--ink-raised); position: relative; min-width: 0; } .sheet-grid img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; border-radius: var(--radius); } .explore-grid { grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .explore-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .explore-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1100px) { .explore-grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1300px) { .explore-grid { grid-template-columns: repeat(6, 1fr); } } .explore-grid img { border-radius: 0; } .explore-grid a:first-child img { border-top-left-radius: var(--radius); } .explore-grid a:nth-child(2) img { border-top-right-radius: var(--radius); } @media (min-width: 480px) { .explore-grid a:nth-child(2) img { border-top-right-radius: 0; } .explore-grid a:nth-child(3) img { border-top-right-radius: var(--radius); } } @media (min-width: 900px) { .explore-grid a:nth-child(3) img { border-top-right-radius: 0; } .explore-grid a:nth-child(4) img { border-top-right-radius: var(--radius); } } @media (min-width: 1100px) { .explore-grid a:nth-child(4) img { border-top-right-radius: 0; } .explore-grid a:nth-child(5) img { border-top-right-radius: var(--radius); } } @media (min-width: 1300px) { .explore-grid a:nth-child(5) img { border-top-right-radius: 0; } .explore-grid a:nth-child(6) img { border-top-right-radius: var(--radius); } } .sheet-pin { position: absolute; top: 6px; right: 6px; z-index: 2; color: var(--white-color); font-size: 12px; background: rgba(0, 0, 0, 0.6); padding: 5px 6px; border-radius: 50%; backdrop-filter: blur(2px); } .sheet-carousel-flag { position: absolute; top: 6px; right: 6px; z-index: 2; color: var(--white-color); font-size: 15px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); } .search-bar { position: relative; display: flex; align-items: center; gap: 10px; background: var(--ink-raised); border: 1px solid var(--line); border-radius: 20px; height: 44px; padding: 11px 16px; margin-bottom: 22px; transition: border-color 0.15s ease; } .search-bar:focus-within { border-color: var(--safelight); } .search-bar.mode-user { border-color: var(--safelight); } .search-bar i { color: var(--grey-dim); font-size: 14px; } .search-bar input { flex: 1; background: transparent; border: none; color: var(--paper); font-size: 15px; } .search-bar input::placeholder { color: var(--grey-dim); } .search-bar input:focus { outline: none; } .search-bar button { background: none; border: none; color: var(--grey-dim); cursor: pointer; font-size: 14px; padding: 2px; display: flex; } .search-bar button:hover { color: var(--paper); } .search-clear { color: var(--grey-dim); display: flex; background: var(--ink-raised); border: none; border-radius: 50%; width: 24px; height: 24px; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .search-clear[hidden] { display: none; } .search-mode-chip { background: color-mix(in srgb, var(--safelight) 14%, transparent); color: var(--safelight); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; padding: 3px 8px; border-radius: var(--radius); flex-shrink: 0; white-space: nowrap; } .messages-search-row, .explore-search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; margin-top: 24px; border-radius: var(--radius); } .explore-search-row { display: flex; align-items: center; justify-content: center; } .explore-search-row .search-mode-chip { display: none; } .search-bar { max-width: var(--max-w-l); } @media (max-width: 721px) { .messages-search-row, .explore-search-row { margin-top: 0; } } .messages-search-row .search-bar, .explore-search-row .search-bar { flex: 1; min-width: 0; margin-bottom: 0; } .explore-page .user-list[data-search-results] { max-width: var(--max-w-l); margin: 0 auto; } .messages-search-avatar { flex-shrink: 0; display: flex; } .messages-search-avatar .avatar-fallback--row { font-size: 32px; } .creator-rail { display: flex; gap: 10px; padding: 6px 6px 2px; margin: -6px -6px 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .creator-rail::-webkit-scrollbar { display: none; } .creator-row { flex: 0 0 auto; text-align: center; width: 76px; } .creator-row .avatar-sm { width: 52px; height: 52px; margin: 0; } .creator-row .avatar-ring-wrap { display: flex; width: 52px; height: 52px; margin: 0 auto 8px; } .creator-row .avatar-fallback--creator { margin: 0; } .creator-row .creator-handle { font-size: 11px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .creator-more { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; background: var(--ink-raised); border: 1px solid var(--line); color: var(--grey); font-size: 18px; transition: color 0.15s ease, border-color 0.15s ease; } .creator-row:hover .creator-more { color: var(--safelight); border-color: var(--safelight); } .hashtag-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .hashtag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--ink-raised); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--paper); transition: color 0.15s ease, border-color 0.15s ease; } .hashtag-chip:hover { color: var(--safelight); border-color: var(--safelight); } .list-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .list-tab { flex: 1; text-align: center; padding: 12px 8px; font-size: 14px; font-weight: 600; color: var(--grey); border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .list-tab:hover { color: var(--paper); } .list-tab.active { color: var(--paper); border-color: var(--safelight); } .list-tab .mono { color: var(--grey-dim); font-weight: 500; margin-left: 4px; } .list-tab.active .mono { color: var(--grey); } .user-list { display: flex; flex-direction: column; } .user-list-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); transition: background 0.15s ease; } .user-list-row:hover { background: var(--ink-raised); } .user-list-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .user-list-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-soft); flex-shrink: 0; } .avatar-ring-wrap { display: inline-flex; flex-shrink: 0; } .user-list-info { flex: 1; min-width: 0; } .user-list-name { font-weight: 600; font-size: 15px; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-list-username { font-size: 13px; color: var(--grey-dim); letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-list-row .btn-sm { flex-shrink: 0; } .user-list-arrow { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 16px; color: var(--grey-dim); background: none; border: none; border-radius: 0; transition: color 0.15s ease; } .user-list-avatar--hashtag { display: flex; align-items: center; justify-content: center; background: var(--ink-raised); color: var(--paper); font-weight: 700; font-size: 18px; } .search-cap-note { text-align: center; padding: 4px 0 24px; font-size: 13px; color: var(--grey-dim); } .mutual-list { display: flex; flex-direction: column; } .mutual-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .mutual-item:not(:last-child) { border-bottom: 1px solid var(--line); } .mutual-item-who { display: flex; flex-direction: column; min-width: 0; } .mutual-item-name { font-weight: 600; font-size: 13px; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mutual-item-username { font-size: 12px; color: var(--grey-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .upload-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: var(--radius); padding: 30px 16px; text-align: center; color: var(--grey); cursor: pointer; margin-bottom: 18px; transition: border-color 0.15s ease, background 0.15s ease; } .upload-drop:hover { border-color: var(--safelight); background: var(--ink-raised); } .upload-drop.drag-active { border-color: var(--safelight); background: var(--ink-raised); color: var(--paper); } .upload-drop i { font-size: 24px; margin-bottom: 8px; color: var(--grey-dim); } .upload-drop .field-hint { margin-top: 6px; } .upload-drop[hidden] { display: none; } .upload-preview { width: 100%; margin-bottom: 18px; border-radius: var(--radius); overflow: hidden; display: none; } .upload-preview--static, .upload-preview--visible { display: block; } .upload-preview-wrap { position: relative; margin-bottom: 18px; border-radius: var(--radius); overflow: hidden; display: none; } .upload-preview-wrap--visible { display: block; } .upload-preview-wrap .upload-preview { display: block; margin-bottom: 0; border-radius: 0; } .upload-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(10, 10, 10, 0.6); color: var(--white-color); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; text-align: center; padding: 16px; } .upload-overlay[hidden] { display: none; } .upload-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: var(--white-color); animation: upload-spin 0.8s linear infinite; } @keyframes upload-spin { to { transform: rotate(360deg); } } .compress-hint { margin-top: -10px; } .ratio-toggle { display: flex; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); padding: 3px; gap: 3px; margin-bottom: 0; overflow-x: auto; scrollbar-width: none; } .ratio-toggle::-webkit-scrollbar { display: none; } .ratio-toggle[hidden] { display: none; } .ratio-btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 56px; padding: 8px 12px; margin: 0; border: 0; border-radius: calc(var(--radius) - 3px); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.75); background: transparent; cursor: pointer; user-select: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .ratio-btn:hover:not(.is-active) { background: rgba(255, 255, 255, 0.1); } .ratio-btn.is-active { background: var(--safelight); color: var(--white-color); } .ratio-btn:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; } .ratio-btn:disabled { cursor: default; opacity: 0.6; } .zoom-slider-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; max-width: 320px; margin: 0 auto; padding: 0 4px; } .story-composer .zoom-slider-wrap i { color: var(--grey-dim); } .story-composer .zoom-slider-wrap .zoom-slider { background: var(--line); } .story-composer .zoom-slider-wrap .zoom-slider::-moz-range-track { background: var(--line); } .zoom-slider-wrap i { flex: 0 0 auto; font-size: 15px; color: rgba(255, 255, 255, 0.6); } .zoom-slider { flex: 1 1 auto; min-width: 0; -webkit-appearance: none; appearance: none; height: 2px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.2); outline: none; cursor: pointer; } .zoom-slider::-webkit-slider-runnable-track { height: 2px; border-radius: var(--radius); background: transparent; } .zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -6px; border: none; border-radius: 20px; background: var(--safelight); cursor: pointer; transition: transform 0.1s ease; } .zoom-slider::-moz-range-track { height: 4px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.2); } .zoom-slider::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: var(--radius); background: var(--safelight); cursor: pointer; transition: transform 0.1s ease; } .zoom-slider:active::-webkit-slider-thumb, .zoom-slider:active::-moz-range-thumb { transform: scale(1.1); } .zoom-slider:focus-visible::-webkit-slider-thumb, .zoom-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--safelight); outline-offset: 2px; } .zoom-slider:disabled { cursor: default; opacity: 0.4; } .crop-grid { position: absolute; inset: 0; pointer-events: none; } .crop-grid[hidden] { display: none; } .crop-grid-line { position: absolute; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); } .crop-grid-v { top: 0; bottom: 0; width: 1px; } .crop-grid-h { left: 0; right: 0; height: 1px; } .upload-preview-wrap.is-cropped { width: 100%; aspect-ratio: var(--crop-ratio, 1); } .upload-preview-wrap.is-cropped .upload-preview { position: absolute; top: 0; left: 0; max-width: none; cursor: grab; touch-action: none; } .upload-preview-wrap.is-cropped .upload-preview:active { cursor: grabbing; } html.scroll-locked, html.crop-overlay-open { overflow: hidden; } .crop-overlay { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: #000; } .crop-overlay[hidden] { display: none; } .crop-overlay-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: max(12px, env(safe-area-inset-top)) 6px 10px; } .crop-overlay-title { font-size: 15px; font-weight: 700; color: var(--white-color); } .crop-overlay-btn { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: none; background: transparent; color: var(--white-color); font-size: 15px; font-weight: 600; cursor: pointer; } .crop-overlay-btn i { font-size: 20px; } .crop-overlay-btn:hover { opacity: 0.8; } .crop-overlay-btn:focus-visible { outline: 2px solid var(--safelight); outline-offset: -2px; } .crop-overlay-done { color: var(--safelight); font-weight: 700; } .crop-overlay-done:hover, .crop-overlay-done:active { font-weight: 700; } .crop-overlay-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .crop-overlay-stage .upload-preview-wrap { margin-bottom: 0; border-radius: 0; } .crop-overlay-stage .upload-preview-wrap--round { border-radius: 50%; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55); } .crop-overlay-controls { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 16px max(14px, env(safe-area-inset-bottom)); } .crop-overlay-controls .ratio-toggle { width: 100%; max-width: 320px; justify-content: center; } .crop-overlay-controls .crop-ratio-hint { margin-top: 0; max-width: 280px; color: rgba(255, 255, 255, 0.55); text-align: center; } .crop-overlay-controls .form-error { width: 100%; max-width: 320px; margin-bottom: 0; background: rgba(255, 90, 90, 0.12); border-color: #ff6b6b; color: #ff6b6b; text-align: center; } .composer-body { display: flex; gap: 12px; } .composer-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--ink-raised); display: flex; align-items: center; justify-content: center; } .composer-avatar img { width: 100%; height: 100%; object-fit: cover; } .composer-avatar .nav-avatar-fallback { font-size: 22px; color: var(--grey-dim); } .composer-main { flex: 1 1 auto; min-width: 0; } .composer-main .caption-field { margin-bottom: 12px; } .composer-main .caption-input-wrap textarea[data-autogrow] { background: var(--input-form); border: 1px solid var(--line); padding: 10px; font-size: 14px; min-height: 100px; } .composer-main .caption-input-wrap textarea[data-autogrow]:focus { border: 1px solid var(--safelight); outline: none; } .composer-main .caption-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .composer-main .caption-footer-left { display: flex; align-items: center; gap: 4px; } .composer-main .caption-emoji-wrap { display: flex; } .composer-main .caption-emoji-toggle { position: static; } .composer-main .caption-emoji-wrap .emoji-picker { left: 0; right: auto; top: calc(100% + 8px); bottom: auto; } @media (max-width: 721px) { .composer-main .caption-emoji-wrap .emoji-picker { right: 0; max-width: none; height: auto; max-height: min(250px, 60vh); } } .composer-main .caption-char-count { margin: 0; } .composer-photo-actions { display: flex; align-items: center; gap: 2px; } .composer-photo-actions[hidden] { display: none; } .composer-icon-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; background: none; border-radius: var(--radius); color: var(--grey-dim); cursor: pointer; font-size: 16px; transition: color 0.15s ease, background-color 0.15s ease; } .composer-icon-btn:hover { color: var(--paper); background: var(--ink-raised); } .composer-icon-btn[aria-expanded="true"] { color: var(--safelight); } .upload-preview-slot { position: relative; margin-bottom: 18px; } .upload-preview-slot[hidden] { display: none; } .upload-preview-slot .upload-preview-wrap { margin-bottom: 0; } .preview-edit-btn, .preview-remove-btn { position: absolute; z-index: 2; border: none; cursor: pointer; color: var(--white-color); background: rgba(10, 10, 10, 0.6); } .preview-edit-btn[hidden], .preview-remove-btn[hidden] { display: none; } .preview-edit-btn { display: flex; align-items: center; gap: 4px; top: 10px; left: 10px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; } .preview-edit-btn i { font-size: 13px; } .preview-edit-btn:hover { background: rgba(10, 10, 10, 0.8); } .preview-remove-btn { top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; } .preview-remove-btn:hover { background: rgba(10, 10, 10, 0.8); } .photo-reel { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; } .photo-reel[hidden] { display: none; } .photo-reel-track { display: flex; gap: 10px; overflow-x: auto; padding: 2px; flex: 1; min-width: 0; } .photo-reel-item { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--ink-raised); border: 2px solid transparent; transition: border-color 0.15s ease, opacity 0.15s ease; } .photo-reel-item.is-active { border-color: var(--safelight); } .photo-reel-item.is-dragging { opacity: 0.4; } .photo-reel-item.drag-over { border-color: var(--grey-dim); } .photo-reel-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .photo-reel-item.is-loading { display: flex; align-items: center; justify-content: center; cursor: default; } .photo-reel-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--white-color); animation: upload-spin 0.8s linear infinite; } .photo-reel-cover-tag { position: absolute; left: 0; bottom: 0; right: 0; padding: 3px 0; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--white-color); background: rgba(10, 10, 10, 0.62); pointer-events: none; } .photo-reel-remove { position: absolute; top: 3px; right: 3px; z-index: 2; width: 20px; height: 20px; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white-color); background: rgba(10, 10, 10, 0.65); cursor: pointer; font-size: 10px; } .photo-reel-remove:hover { background: rgba(10, 10, 10, 0.85); } .photo-reel-add { flex: 0 0 auto; width: 76px; height: 76px; border-radius: var(--radius); border: 1px dashed var(--line); background: none; color: var(--grey-dim); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; } .photo-reel-add:hover { border-color: var(--safelight); color: var(--safelight); } .photo-reel-add[hidden] { display: none; } .photo-reel--readonly .photo-reel-item { cursor: default; } .composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 14px; } .composer-audience { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--safelight); } .composer-post-btn { width: auto; margin-left: auto; padding: 9px 24px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .composer-post-btn:disabled { opacity: 0.5; cursor: default; } .composer-post-btn .ph-circle-notch { animation: composer-post-spin 0.8s linear infinite; } @keyframes composer-post-spin { to { transform: rotate(360deg); } } .notif-tabs { display: flex; gap: 8px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .notif-tabs::-webkit-scrollbar { display: none; } .notif-tab { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 8px 16px; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); color: var(--grey-dim); font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .notif-tab:hover { color: var(--paper); } .notif-tab:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; } .notif-tab.active { color: var(--paper); } .notif-list { display: flex; flex-direction: column; } .notif-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey-dim); padding: 0 0 6px; } .notif-section-label:not([hidden]) ~ .notif-section-label:not([hidden]) { padding-top: 16px; } .notif-row-swipe { position: relative; overflow: hidden; border-radius: var(--radius); touch-action: pan-y; } .notif-swipe-delete { position: absolute; top: 2px; right: 2px; bottom: 2px; width: 76px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--safelight); color: #fff; border: 0; font-size: 19px; padding: 0; } @media (min-width: 722px) { .notif-swipe-delete { display: none; } } .notif-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--ink); --story-gap: var(--ink); transition: background 0.12s ease; position: relative; width: calc(100% + 2px); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .notif-row[hidden] { display: none; } .notif-row:hover { background: var(--ink-raised); --story-gap: var(--ink-raised); } .notif-row.unread .notif-text b { font-weight: 700; } .notif-row-link { display: contents; color: inherit; text-decoration: none; cursor: pointer; } .notif-menu { flex-shrink: 0; align-self: center; } .notif-more-btn { color: var(--grey-dim); opacity: 0; transition: opacity 0.12s ease, color 0.12s ease; } .notif-more-btn i { font-size: 18px; } .notif-row:hover .notif-more-btn, .notif-more-btn:focus-visible { opacity: 1; color: var(--paper); } @media (max-width: 721px) { .notif-menu { display: none; } } .notif-avatar-wrap { position: relative; flex-shrink: 0; width: 40px; height: 40px; margin: 4px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .notif-avatar-wrap > .avatar-sm { width: 40px; height: 40px; } .notif-avatar-wrap > .avatar-fallback { font-size: 40px; } .notif-icon { position: absolute; right: -6px; bottom: -6px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #fff; background: var(--grey-dim); border: 2px solid var(--story-gap); } .notif-icon > i { display: block; line-height: 1; } .notif-icon.like { background: var(--safelight); } .notif-icon.follow { background: var(--success-text); } .notif-icon.comment { background: var(--warn-text); } .notif-icon.post { background: var(--grey); } .notif-icon.collab { background: #999999; } .notif-icon.share { background: var(--grey); } .notif-icon.comment_love { background: color-mix(in srgb, var(--safelight) 70%, var(--paper) 30%); } .notif-icon.comment_pin { background: var(--paper); color: var(--ink); } .notif-icon.comment_reply { background: color-mix(in srgb, var(--grey-dim) 55%, var(--paper) 45%); } .notif-icon.warning { background: var(--warn-text); } .notif-icon.comment_mention, .notif-icon.post_mention { background: var(--warn-text); } .notif-text { flex: 1; font-size: 14.5px; color: var(--paper); line-height: 1.6; } .notif-text b { font-weight: 600; } .notif-time { display: block; font-size: 12px; color: var(--grey-dim); margin-top: 2px; } .notif-thumb { flex-shrink: 0; width: 42px; height: 42px; border-radius: 4px; object-fit: cover; } .notif-follow-btn { flex-shrink: 0; } .theme-switch { display: flex; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; } .theme-switch-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: none; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--grey); font-size: 14px; font-weight: 600; cursor: pointer; } .theme-switch-btn i { font-size: 13px; } .theme-switch-btn.active { background: var(--ink-raised); color: var(--paper); border: 1px solid var(--line); } .scale-setting { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .scale-auto-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .scale-auto-label { display: flex; flex-direction: column; gap: 2px; } .scale-auto-label span { font-size: 14px; font-weight: 600; color: var(--paper); } .scale-auto-hint { font-size: 12px; color: var(--grey-dim); } .switch { position: relative; display: inline-flex; flex-shrink: 0; width: 42px; height: 24px; cursor: pointer; } .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); border: 1px solid var(--line); transition: background 0.2s ease, border-color 0.2s ease; } .switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--white-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; } .switch input:checked ~ .switch-track { background: var(--safelight); border-color: var(--safelight); } .switch input:checked ~ .switch-track .switch-thumb { transform: translateX(18px); } .switch input:focus-visible ~ .switch-track { outline: 2px solid var(--safelight); outline-offset: 2px; } .scale-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .scale-setting-row span { font-size: 14px; font-weight: 600; color: var(--paper); } .scale-value-wrap { display: flex; align-items: center; gap: 6px; } .scale-auto-chip { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--safelight); border: 1px solid var(--safelight); border-radius: 999px; padding: 2px 6px; line-height: 1.4; } .scale-value-badge { font-size: 13px; font-weight: 700; color: var(--grey-dim); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; } .scale-slider-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; transition: opacity 0.2s ease; } .scale-setting.is-auto .scale-slider-row, .scale-setting.is-auto .scale-tick-row { opacity: 0.45; pointer-events: none; } .scale-slider-row i { font-size: 14px; color: var(--grey-dim); flex-shrink: 0; } .scale-slider-row i:last-child { font-size: 18px; } input[type="range"].scale-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: var(--line); accent-color: var(--safelight); cursor: pointer; } input[type="range"].scale-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--safelight); border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; } input[type="range"].scale-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--safelight); border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; } input[type="range"].scale-slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line); } .scale-tick-row { display: flex; justify-content: space-between; margin-top: 6px; } .scale-tick-row span { font-size: 11px; color: var(--grey-dim); } .logout-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .logout-row span { font-size: 14px; color: var(--grey); } .blocked-list { display: flex; flex-direction: column; gap: 8px; } .blocked-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; } .blocked-row.leaving { opacity: 0; transition: opacity 0.18s ease; } .blocked-who { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; flex: 1; } .blocked-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .blocked-who > span:not(.avatar-sm) { flex: 1; min-width: 0; } .blocked-who .avatar-sm { flex-shrink: 0; } .blocked-who .avatar-fallback { font-size: 30px; line-height: 1; color: var(--grey-dim); flex-shrink: 0; } .blocked-name { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .blocked-username { display: block; font-size: 13px; color: var(--grey-dim); text-overflow: ellipsis; display: flex; justify-content: left; align-items: baseline; } .account-active-badge { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--success-text); font-style: normal; } .account-active-badge::before { content: " • "; padding-left: 3px; } .account-active-badge.active-border { text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; } .settings-link-row { margin-top: 24px; text-align: center; } .settings-link-row a { color: var(--grey); font-size: 13px; } .email-change-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 18px; } .email-change-actions .auth-inline-form { margin-top: 0; text-align: left; } .empty { text-align: center; padding: 60px 20px; color: var(--grey); } .empty i { font-size: 26px; color: var(--grey-dim); margin-bottom: 12px; display: block; } .empty p { margin: 4px 0; font-size: 14px; } .empty .empty-sub { font-size: 14px; color: var(--grey-dim); } .infinite-feed-sentinel { height: 1px; } .infinite-feed-spinner { display: flex; justify-content: center; padding: 24px 0; } .infinite-feed-spinner i { font-size: 22px; color: var(--grey-dim); animation: infinite-feed-spin 0.8s linear infinite; } .infinite-feed-spinner[hidden] { display: none; } @keyframes infinite-feed-spin { to { transform: rotate(360deg); } } .scroll-top { position: fixed; right: 18px; bottom: var(--bottomnav-clearance); z-index: 45; width: 38px; height: 38px; border-radius: 50%; background: var(--ink-raised); border: 1px solid var(--line); color: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(8px) scale(0.9); transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.15s ease; } .scroll-top.visible { opacity: 1; transform: translateY(0) scale(1); } .scroll-top:hover { border-color: var(--safelight); color: var(--safelight); } @media (max-width: 720px) { .scroll-top { display: none !important; } } @media (min-width: 721px) { .scroll-top { bottom: 24px; } } .avatar-sm.fade-init, .avatar-lg.fade-init, .profile-avatar.fade-init, .user-list-avatar.fade-init, .sheet-grid img.fade-init { opacity: 0; transition: opacity 0.2s ease; } .avatar-sm.fade-init.is-loaded, .avatar-lg.fade-init.is-loaded, .profile-avatar.fade-init.is-loaded, .user-list-avatar.fade-init.is-loaded, .sheet-grid img.fade-init.is-loaded { opacity: 1; } .error-page { position: relative; min-height: calc(100vh - 160px); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 40px 0; } .error-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 360px; margin: 0 auto; } .error-visual { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .error-ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 108px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--line-soft); user-select: none; white-space: nowrap; } .error-mark { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--ink-raised); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); font-size: 32px; color: var(--safelight); } .error-mark::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--safelight) 35%, transparent); animation: error-ring-pulse 2.6s ease-out infinite; } @keyframes error-ring-pulse { 0% { transform: scale(0.82); opacity: 0.55; } 100% { transform: scale(1.3); opacity: 0; } } .error-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: var(--ink-raised); border: 1px solid var(--line); color: var(--safelight); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 14px; } .error-inner h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; } .error-inner p { color: var(--grey); font-size: 14px; line-height: 1.6; margin-bottom: 28px; } .error-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 260px; } @media (min-width: 480px) { .error-actions { flex-direction: row; max-width: none; } .error-actions .btn { width: auto; flex: 1; } } @media (max-width: 480px) { .error-visual { width: 160px; height: 160px; margin-bottom: 16px; } .error-ghost { font-size: 84px; } .error-mark { width: 68px; height: 68px; font-size: 27px; } } @media (max-width: 480px) { .shell { padding: 18px 14px 90px; } } .chart-wrap { position: relative; width: 100%; height: clamp(150px, 20vw, 220px); } .chart-svg { display: block; width: 100%; height: 100%; overflow: visible; } .chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; } .chart-dots-layer { position: absolute; inset: 0; pointer-events: none; } .chart-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; pointer-events: auto; } .chart-dot-current { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; } .chart-axis-row { position: relative; width: 100%; height: 16px; margin-top: 6px; } .chart-axis-label { position: absolute; top: 0; color: var(--grey-dim); font-size: 11px; font-weight: 600; white-space: nowrap; } .chart-axis-label-start { transform: translateX(0); } .chart-axis-label-middle { transform: translateX(-50%); } .chart-axis-label-end { transform: translateX(-100%); } .chart-axis-label-hidden { display: none; } .chart-card { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px 10px; } .ins-period { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 20px; } .ins-period-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ins-period-tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); color: var(--grey-dim); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ins-period-tab:hover { color: var(--paper); } .ins-period-tab.active { color: var(--paper); border-color: var(--safelight); } .ins-period-caption { letter-spacing: 0.04em; font-weight: 600; font-size: 12px; color: var(--grey-dim); white-space: nowrap; } .ins-period-caption:before { content: " • "; margin-right: 12px; display: inline-block; } @media (max-width: 721px) { .wide-shell .page-title-row { flex-direction: column; align-items: stretch; } } .ins-range-picker { position: relative; } .ins-range-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: flex; flex-direction: column; gap: 12px; width: 296px; max-width: calc(100vw - 32px); background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--box-shadow); } .ins-range-popover[hidden], .ins-range-fields[hidden] { display: none; } .ins-range-fields { display: flex; flex-direction: column; gap: 10px; } .ins-range-field label { display: block; font-size: 11px; font-weight: 600; color: var(--grey-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; } .ins-range-popover input[type="date"] { width: 100%; background: var(--input-form); border: 1px solid var(--line); color: var(--paper); padding: 8px 10px; border-radius: var(--radius); font-size: 13px; font-family: inherit; } .ins-range-actions .btn { width: 100%; } .ins-range-actions .btn[disabled] { opacity: 0.45; cursor: default; } .ins-cal { -webkit-user-select: none; user-select: none; } .ins-cal-summary { font-size: 12px; font-weight: 600; color: var(--grey-dim); margin-bottom: 10px; min-height: 16px; } .ins-cal-summary.is-set { color: var(--paper); } .ins-cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .ins-cal-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--paper); } .ins-cal-dd { position: relative; flex: 1; min-width: 0; } .ins-cal-dd[data-cal-dd="year"] { flex: 0.8; } .ins-cal-select { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); color: var(--paper); font-size: 12.5px; font-weight: 700; font-family: inherit; padding: 5px 6px; cursor: pointer; } .ins-cal-select:focus { outline: none; border-color: var(--safelight); } .ins-cal-select i { font-size: 10px; color: var(--grey-dim); transition: transform 0.15s ease; } .ins-cal-dd.is-open .ins-cal-select { border-color: var(--safelight); } .ins-cal-dd.is-open .ins-cal-select i { transform: rotate(180deg); } .ins-cal-dd-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; width: 100%; max-height: 182px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--box-shadow); } .ins-cal-dd[data-cal-dd="year"] .ins-cal-dd-list { left: auto; right: 0; } .ins-cal-dd-list[hidden] { display: none; } .ins-cal-dd-item { padding: 6px 8px; border-radius: var(--radius); font-size: 12.5px; font-weight: 600; color: var(--paper); cursor: pointer; } .ins-cal-dd-item:hover { background: var(--line); } .ins-cal-dd-item.is-selected { background: var(--safelight); color: var(--white-color); font-weight: 700; } .ins-cal-dd-item.is-selected:hover { background: var(--safelight); } .ins-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--grey-dim); font-size: 14px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .ins-cal-nav:hover:not(:disabled) { color: var(--paper); border-color: var(--line); } .ins-cal-nav:disabled { opacity: 0.3; cursor: default; } .ins-cal-dows, .ins-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .ins-cal-dows { margin-bottom: 4px; } .ins-cal-dow { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-dim); } .ins-cal-day { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0; background: transparent; border: 0; border-radius: var(--radius); color: var(--paper); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .ins-cal-day.is-out { color: var(--grey-dim); opacity: 0.5; } .ins-cal-day:disabled { opacity: 0.25; cursor: default; } .ins-cal-day:hover:not(:disabled):not(.is-edge) { background: var(--line); } .ins-cal-day.is-today:not(.is-edge)::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--safelight); } .ins-cal-day.is-in-range { background: rgba(var(--safelight-rgb), 0.15); border-radius: 0; } .ins-cal-day.is-edge { background: var(--safelight); color: var(--white-color); } .ins-cal-day.is-start.is-edge { border-radius: var(--radius) 0 0 var(--radius); } .ins-cal-day.is-end.is-edge { border-radius: 0 var(--radius) var(--radius) 0; } .ins-cal-day.is-start.is-end.is-edge { border-radius: var(--radius); } .ins-cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .ins-cal-link { padding: 0; background: none; border: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--grey-dim); cursor: pointer; transition: color 0.15s ease; } .ins-cal-link:hover { color: var(--safelight); } .ins-download-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius); background: var(--ink-raised); border: 1px solid var(--line); color: var(--grey-dim); font-size: 15px; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } .ins-download-btn:hover { color: var(--paper); border-color: var(--safelight); } .ins-hero { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 14px; margin-bottom: 22px; } .ins-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ins-hero-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-dim); } .ins-hero-value { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; } .ins-hero-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 20px; white-space: nowrap; margin-top: 2px; } .ins-hero-trend.up { color: var(--success-text); background: color-mix(in srgb, var(--success-text) 14%, transparent); } .ins-hero-trend.down { color: var(--danger-text); background: color-mix(in srgb, var(--danger-text) 14%, transparent); } .ins-hero-trend.flat { color: var(--grey-dim); background: var(--line-soft); } .ins-hero-chart { margin: 14px -4px 0; } .ins-hero-caption { font-size: 12px; color: var(--grey-dim); text-align: center; margin-top: -4px; } .ins-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; } .ins-kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; } .ins-kpi-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--ink-raised); color: var(--safelight); font-size: 15px; display: flex; align-items: center; justify-content: center; } .ins-kpi-value { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; } .ins-kpi-label { font-size: 12.5px; color: var(--grey-dim); font-weight: 500; } .ins-kpi-value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .ins-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; } .ins-kpi-trend.up { color: var(--success-text); background: color-mix(in srgb, var(--success-text) 14%, transparent); } .ins-kpi-trend.down { color: var(--danger-text); background: color-mix(in srgb, var(--danger-text) 14%, transparent); } .ins-kpi-trend.flat { color: var(--grey-dim); background: var(--line-soft); } .ins-top-rank { position: absolute; top: 6px; left: 6px; z-index: 2; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(2px); } .post-modal { position: fixed; inset: 0; z-index: 260; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); animation: lightbox-fade-in 0.18s ease; backdrop-filter: blur(50px); } .post-modal[hidden] { display: none; } .post-modal.closing { animation: lightbox-fade-out 0.15s ease forwards; } .post-modal-body { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--ink); overflow: hidden; transition: width 0.2s ease, height 0.2s ease; } .post-modal-stage { position: relative; flex: 0 0 auto; height: 60vh; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; transition: width 0.2s ease, height 0.2s ease; } .post-modal-img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transform: scale(0.97); transition: opacity 0.18s ease, transform 0.18s ease, filter 0.25s ease; } .post-modal-img.is-loaded { opacity: 1; transform: scale(1); } .post-modal-img.is-thumb { opacity: 1; transform: scale(1.02); filter: blur(14px); } .post-modal-spinner { position: absolute; color: rgba(255, 255, 255, 0.6); font-size: 28px; display: flex; } .post-modal-spinner i { animation: spin 0.8s linear infinite; } .post-modal-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .post-modal-media .frame-carousel, .post-modal-media .frame-carousel-track { width: 100%; height: 100%; } .post-modal-media .frame-carousel-slide { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .post-modal-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line); } .post-modal-error { padding: 24px 12px; text-align: center; color: var(--grey-dim); font-size: 14px; } .post-modal-close { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 40px; height: 40px; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 261; font-size: 16px; background: transparent; border: none; } .post-modal-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 261; width: 44px; height: 44px; border: none; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.35); cursor: pointer; font-size: 20px; transition: background-color 0.15s ease; } .post-modal-nav:hover { background: rgba(0, 0, 0, 0.5); } .post-modal-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .post-modal-nav:disabled { opacity: 0.5; cursor: default; } .post-modal-nav[hidden] { display: none; } .post-modal-nav-prev { left: max(16px, env(safe-area-inset-left)); } .post-modal-nav-next { right: max(16px, env(safe-area-inset-right)); } @media (max-width: 640px) { .post-modal-nav { width: 36px; height: 36px; font-size: 16px; } } .post-modal-topbar { display: none; } @media (max-width: 860px) { .post-modal-close, .post-modal-nav { display: none; } .post-modal-topbar { display: flex; align-items: center; justify-content: space-between; position: fixed; top: env(safe-area-inset-top); left: env(safe-area-inset-left); right: env(safe-area-inset-right); z-index: 262; padding: 6px 6px; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) ); } .post-modal-topbar-nav { display: flex; align-items: center; gap: 2px; } .post-modal-topbar-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; border: none; font-size: 18px; cursor: pointer; } .post-modal-topbar-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 50%; } .post-modal-topbar-btn:disabled { opacity: 0.5; cursor: default; } .post-modal-topbar-btn[hidden] { display: none; } } @media (prefers-reduced-motion: reduce) { .post-modal, .post-modal-img, .post-modal-close, .post-modal-nav { animation: none !important; transition: none !important; } } .pm-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; } .pm-head { flex: 0 0 auto; padding: 12px; border-bottom: 1px solid var(--line); } .pm-open-post { color: var(--grey); display: flex; align-items: center; font-size: 18px; } .pm-open-post:hover { color: var(--paper); } .pm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 8px; scrollbar-width: thin; scrollbar-color: var(--ink-raised) transparent; } .pm-scroll::-webkit-scrollbar { width: 6px; } .pm-scroll::-webkit-scrollbar-track { background: transparent; } .pm-scroll::-webkit-scrollbar-thumb { background: var(--ink-raised); border-radius: 999px; } .pm-caption-row { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); } .pm-caption-row .c-body { -webkit-line-clamp: 20; line-clamp: 20; } .pm-scroll .comments { margin-top: 0; max-height: none; overflow-y: visible; } .pm-footer { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 10px 12px 12px; } .pm-footer .frame-actions { margin-bottom: 10px; } .pm-footer .comment-form { margin: 0; } .pm-footer .reply-banner { margin-bottom: 8px; } @media (max-width: 860px) { .post-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } .post-modal-stage { flex: 0 0 auto; } .post-modal-panel { flex: 0 0 auto; overflow-y: visible; min-height: 0; } .pm-panel { height: auto; } .pm-scroll { flex: 0 0 auto; overflow-y: visible; min-height: 0; } .pm-footer { position: sticky; bottom: 0; background: var(--ink); z-index: 1; } } @media (min-width: 861px) { .post-modal-body { flex-direction: row; width: min(1160px, 94vw); height: min(760px, 92vh); border-radius: 0; border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); } .post-modal-stage { flex: 0 0 auto; width: 62%; height: 100%; } .post-modal-panel { flex: 0 0 400px; max-width: 400px; border-top: none; border-left: 1px solid var(--line); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .frame .ph-bold { transition: 0.3s ease; transform-origin: center; will-change: transform; } .frame .ph-bold:hover { transform: scale(1.05); transition: 0.3s ease; } @media (prefers-reduced-motion: reduce) { .topbar-action i, .nav-item i, .bottomnav a i, .frame .ph-bold { transition: none; will-change: auto; } .topbar-action:hover i, .topbar-action:focus-visible i, .topbar-action.active i, .nav-item:hover i, .nav-item:focus-visible i, .nav-item.active i, .bottomnav a:hover i, .bottomnav a:focus-visible i, .bottomnav a.active i, .topbar-actions a.active i, .frame .ph-bold:hover { transform: none; transition: none; } } body.activity-page .shell { max-width: var(--max-w-l); } body.activity-page .profile-tabs { margin-top: 0; border-bottom: 1px solid var(--line); } .activity-list { display: flex; flex-direction: column; margin-top: 8px; } .activity-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); color: inherit; text-decoration: none; transition: background 0.12s ease; } .activity-row:hover { background: var(--ink-raised); } .activity-row:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; } .activity-thumb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 4px; object-fit: cover; background: var(--ink-raised); } .activity-text { flex: 1; min-width: 0; } .activity-meta { font-size: 13px; line-height: 1.5; color: var(--grey-dim); } .activity-meta b { font-weight: 600; color: var(--paper); } .activity-body { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--paper); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 721px) { .activity-body { -webkit-line-clamp: 1; line-clamp: 1; } } .activity-time { display: block; margin-top: 4px; font-size: 12px; color: var(--grey-dim); } body.reports-page .shell { max-width: var(--max-w-l); } .reports-intro { margin: -8px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--grey-dim); } .report-filters { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; } .report-filters::-webkit-scrollbar { display: none; } .report-filter { position: relative; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: var(--grey-dim); text-decoration: none; transition: color 0.15s ease; } .report-filter:hover { color: var(--grey); } .report-filter.active { color: var(--paper); } .report-filter.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--paper); } .report-filter:focus-visible { outline: 2px solid var(--safelight); outline-offset: -2px; } .report-filter-count { min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--ink-raised); font-size: 11px; letter-spacing: 0; text-align: center; } .report-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .report-row { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .report-row-main { display: flex; align-items: flex-start; gap: 12px; padding: 14px; } .report-target { flex-shrink: 0; color: inherit; text-decoration: none; } .report-target:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; } .report-avatar { border-radius: 50%; } .report-thumb-fallback { display: flex; align-items: center; justify-content: center; color: var(--grey-dim); font-size: 22px; } .report-story-thumb { position: relative; overflow: hidden; } .report-story-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .report-text { flex: 1; min-width: 0; } .report-row-reason { margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.5; } .report-text .activity-body { color: var(--grey); } .report-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--radius); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; background: var(--ink-raised); color: var(--grey); } .report-pill--open { color: var(--warn-text); } .report-pill--success { color: var(--success-text); } @media (max-width: 480px) { .report-pill { display: none; } } .report-result { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--ink-raised); font-size: 13px; line-height: 1.5; } .report-result > i { flex-shrink: 0; margin-top: 2px; font-size: 16px; color: var(--grey-dim); } .report-result b { font-weight: 600; } .report-result p { margin: 1px 0 0; color: var(--grey); } .report-result--open > i { color: var(--warn-text); } .report-result--success > i { color: var(--success-text); } .report-pager { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .report-modal-done .report-modal-sub a { color: var(--paper); text-decoration: underline; } .vbadge { display: inline-block; flex: none; width: 0.9em; height: 0.9em; margin-left: 0.28em; vertical-align: -0.2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231a80f0' d='M23.2,12.0L23.0,12.9L22.2,13.6L21.2,14.2L20.4,14.7L19.9,15.3L19.8,16.0L20.1,17.0L20.3,18.1L20.4,19.1L20.0,20.0L19.1,20.4L18.1,20.3L17.0,20.1L16.0,19.8L15.3,19.9L14.7,20.4L14.2,21.2L13.6,22.2L12.9,23.0L12.0,23.2L11.1,23.0L10.4,22.2L9.8,21.2L9.3,20.4L8.7,19.9L8.0,19.8L7.0,20.1L5.9,20.3L4.9,20.4L4.0,20.0L3.6,19.1L3.7,18.1L3.9,17.0L4.2,16.0L4.1,15.3L3.6,14.7L2.8,14.2L1.8,13.6L1.0,12.9L0.8,12.0L1.0,11.1L1.8,10.4L2.8,9.8L3.6,9.3L4.1,8.7L4.2,8.0L3.9,7.0L3.7,5.9L3.6,4.9L4.0,4.0L4.9,3.6L5.9,3.7L7.0,3.9L8.0,4.2L8.7,4.1L9.3,3.6L9.8,2.8L10.4,1.8L11.1,1.0L12.0,0.8L12.9,1.0L13.6,1.8L14.2,2.8L14.7,3.6L15.3,4.1L16.0,4.2L17.0,3.9L18.1,3.7L19.1,3.6L20.0,4.0L20.4,4.9L20.3,5.9L20.1,7.0L19.8,8.0L19.9,8.7L20.4,9.3L21.2,9.8L22.2,10.4L23.0,11.1Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M7.4 12.4l3.2 3.2 6-6.6'/%3E%3C/svg%3E") center / contain no-repeat; forced-color-adjust: none; } .rail-me-name .vname, .rail-suggest-name .vname, .remembered-account-name .vname, .mention-menu-display .vname, .creator-row .creator-handle .vname, .user-list-name .vname, .blocked-name .vname, .conv-name .vname, .story-viewer-info b .vname { display: inline-block; max-width: calc(100% - 1.5em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .rail-me-name .vname + .vbadge, .rail-suggest-name .vname + .vbadge, .remembered-account-name .vname + .vbadge, .mention-menu-display .vname + .vbadge, .creator-row .creator-handle .vname + .vbadge, .user-list-name .vname + .vbadge, .blocked-name .vname + .vbadge, .conv-name .vname + .vbadge, .story-viewer-info b .vname + .vbadge { vertical-align: middle; } .auth-terms { margin: 4px 0 16px; } .auth-terms[hidden] { display: none; } .auth-terms-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--grey); cursor: pointer; } .auth-terms-label input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--safelight); cursor: pointer; } .auth-terms-label a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; } .head-avatars { position: relative; flex: 0 0 auto; width: 40px; height: 40px; } .head-avatar { position: absolute; display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--ink); line-height: 0; } .head-avatar--back { top: 0; left: 0; } .head-avatar--front { right: 0; bottom: 0; z-index: 1; } .head-avatar .avatar-sm { display: block; width: 28px; height: 28px; } .head-avatar .avatar-fallback--row { display: block; width: 28px; height: 28px; font-size: 28px; line-height: 28px; border-radius: 50%; background: var(--ink); } .frame-byline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: -0.005em; } .frame-byline-and { font-weight: 400; } .frame-head .who-line .meta { flex: none; } .frame-byline .vname { font-weight: 600; } .frame-people-more { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .frame-people-more:hover { text-decoration: underline; } .frame-menu-modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: flex-end; justify-content: center; padding: 0; } .frame-menu-modal[hidden] { display: none; } .frame-menu-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .frame-menu-modal.closing .frame-menu-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .frame-menu-modal-card { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: 100dvh; background: var(--input-form); border: 1px solid var(--line); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); overflow: hidden; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .frame-menu-modal.closing .frame-menu-modal-card { animation: share-sheet-out 0.16s ease forwards; } .frame-menu-modal-grabber { flex: none; width: 40px; height: 4px; margin: 8px auto 2px; border-radius: var(--radius); background: var(--line); } .frame-menu-modal-icons:empty { display: none; } .frame-menu-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; } .frame-menu-modal-body .owner-menu-item { padding: 15px 18px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); } .frame-menu-modal-body .owner-menu-item:last-child { border-bottom: none; } .frame-menu-modal-cancel { flex: none; width: 100%; padding: 15px 18px; background: none; border: none; border-top: 1px solid var(--line); font: inherit; font-size: 15px; font-weight: 700; color: var(--grey); cursor: pointer; } .frame-menu-modal-cancel:hover { background: var(--ink-raised); } @media (prefers-reduced-motion: reduce) { .frame-menu-modal-backdrop, .frame-menu-modal-card { animation: none !important; } } .share-modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 20px env(safe-area-inset-right) 20px env(safe-area-inset-left); } .share-modal[hidden] { display: none; } .share-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); animation: confirm-backdrop-in 0.18s ease; } .share-modal.closing .share-modal-backdrop { animation: confirm-backdrop-out 0.15s ease forwards; } .share-modal-card { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: min(640px, calc(100dvh - 40px)); background: var(--input-form); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); overflow: hidden; animation: confirm-card-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); } .share-modal.closing .share-modal-card { animation: confirm-card-out 0.15s ease forwards; } .share-modal-grabber { display: none; } .share-modal-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 52px; flex: none; } .share-modal-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--paper); } .share-modal-close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius); background: transparent; color: var(--grey); font-size: 18px; cursor: pointer; } .share-modal-close:hover { background: var(--ink-raised); color: var(--paper); } .share-modal-search { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 0 14px; height: 40px; border-radius: var(--radius); background: var(--ink-raised); color: var(--grey-dim); } .share-modal-search input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; color: var(--paper); font: inherit; font-size: 14px; } .share-modal-search input::-webkit-search-cancel-button { display: none; } .share-modal-people { flex: 1; min-height: 150px; overflow-y: auto; padding: 8px 10px 12px; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 4px 0; overscroll-behavior: contain; } .share-person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px 8px; border: none; border-radius: var(--radius); background: transparent; color: var(--paper); font: inherit; cursor: pointer; min-width: 0; } .share-person:hover { background: var(--ink-raised); } .share-person-avatar { position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--ink-raised); color: var(--grey-dim); display: flex; align-items: center; justify-content: center; font-size: 46px; } .share-person-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-soft); } .share-person-check { position: absolute; right: -2px; bottom: -2px; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--input-form); background: var(--safelight); color: #fff; font-size: 12px; } .share-person.selected .share-person-check { display: flex; } .share-person.selected .share-person-avatar img, .share-person.selected .share-person-avatar { box-shadow: 0 0 0 2px var(--input-form), 0 0 0 4px var(--safelight); } .share-person-name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; font-size: 12.5px; line-height: 1.25; text-align: center; word-break: break-word; font-weight: 500; } .share-person-name .vbadge { margin-left: 0.3em; vertical-align: -0.15em; } .share-person.sent .share-person-avatar { opacity: 0.55; } .share-person.sent .share-person-check { display: flex; background: var(--success-text); } .share-person.failed .share-person-check { display: flex; background: var(--danger-text); } .share-modal-empty { grid-column: 1 / -1; padding: 36px 16px; text-align: center; font-size: 13.5px; color: var(--grey-dim); } .share-modal-skel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 4px; } .share-modal-skel::before { content: ""; width: 74px; height: 74px; border-radius: 50%; background: var(--ink-raised); animation: share-pulse 1.1s ease-in-out infinite; } .share-modal-skel::after { content: ""; width: 52px; height: 10px; border-radius: var(--radius); background: var(--ink-raised); animation: share-pulse 1.1s ease-in-out infinite; } @keyframes share-pulse { 50% { opacity: 0.45; } } .share-modal-send { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); } .share-modal-send[hidden] { display: none; } .share-modal-targets[hidden] { display: none; } .share-modal-note { flex: none; width: 100%; min-width: 0; display: block; min-height: 40px; max-height: 120px; padding: 9px 14px; border: none; border-radius: var(--radius); background: var(--input-form); color: var(--paper); font: inherit; font-size: 14px; line-height: 20px; resize: none; overflow-y: auto; outline: none; } .share-modal-note:focus { border-color: var(--grey-dim); } .share-modal-send-btn { width: 100%; flex: none; height: 35px; padding: 0 22px; border: none; border-radius: var(--radius); background: var(--safelight); color: #fff; font-weight: 700; cursor: pointer; } .share-modal-send-btn:hover { filter: brightness(1.08); } .share-modal-send-btn:disabled { opacity: 0.6; cursor: default; } .share-modal-targets { position: relative; flex: none; border-top: 1px solid var(--line); } .share-modal-targets-row { display: flex; gap: 4px; padding: 14px 12px 16px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .share-modal-targets-row::-webkit-scrollbar { display: none; } .share-target { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; padding: 0; border: none; background: transparent; color: var(--paper); font: inherit; cursor: pointer; } .share-target[hidden] { display: none; } .share-target-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink-raised); font-size: 24px; transition: background 0.15s ease, transform 0.15s ease; } .share-target:hover .share-target-icon { background: var(--line); } .share-target:active .share-target-icon { transform: scale(0.94); } .share-target-label { font-size: 12px; color: var(--grey); white-space: nowrap; font-weight: 500; } .share-target.done .share-target-icon { background: var(--success-text); color: #fff; } .share-modal-scroll { position: absolute; top: 26px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--radius); background: var(--grey-dim); color: #fff; font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .share-modal-scroll[hidden] { display: none; } .share-modal-scroll-prev { left: 6px; } .share-modal-scroll-next { right: 6px; } @media (max-width: 600px) { .share-modal { align-items: flex-end; padding: 0; } .share-modal-card { max-width: none; max-height: 82dvh; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: share-sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); } .share-modal.closing .share-modal-card { animation: share-sheet-out 0.16s ease forwards; } .share-modal-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: var(--radius); background: var(--line); } .share-modal-head { min-height: 44px; } .share-modal-close { top: 6px; } .share-person-avatar { width: 64px; height: 64px; font-size: 40px; } .share-modal-scroll { display: none; } } @keyframes share-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes share-sheet-out { to { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .share-modal-backdrop, .share-modal-card, .share-modal-skel::before, .share-modal-skel::after { animation: none !important; } .share-modal-targets-row { scroll-behavior: auto; } } :root { --story-ring-unseen: linear-gradient( 45deg, #fdcb2f 0%, #f6a21a 18%, var(--safelight) 55%, #c026d3 100% ); --story-ring-w: 2px; --story-ring-gap: 2px; --story-gap: var(--ink); } html.story-open { overflow: hidden; } .story-viewer [hidden], .story-composer [hidden], .story-viewer[hidden], .story-composer[hidden] { display: none !important; } .story-tray { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 16px; margin-bottom: 14px; border-bottom: 0; box-shadow: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .story-tray::-webkit-scrollbar { display: none; } .story-item { position: relative; flex: 0 0 auto; width: 68px; text-align: center; } .story-ring { display: block; box-sizing: border-box; width: 66px; height: 66px; padding: 2px; margin: 0 auto; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: transform 0.12s ease; } .story-ring:active { transform: scale(0.94); } .story-ring:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; } .story-ring.is-unseen { background: var(--story-ring-unseen); } .story-ring.is-none { background: transparent; } .story-avatar, .story-avatar-fallback { display: block; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; background: var(--ink); } .story-avatar { object-fit: cover; border: 3px solid var(--ink); } .story-avatar-fallback { font-size: 62px; line-height: 1; border: 0; } .story-add-badge { position: absolute; right: 2px; top: 42px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 22px; height: 22px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--safelight); color: var(--white-color); font-size: 11px; cursor: pointer; } .story-name { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--grey); } .story-tray-wrap { position: relative; } .story-tray-arrow { position: absolute; top: 35px; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 0; color: var(--paper); background: var(--ink-raised); box-shadow: var(--box-shadow); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .story-tray-arrow i { font-size: 13px; } .story-tray-wrap:hover .story-tray-arrow:not([hidden]) { opacity: 1; pointer-events: auto; } .story-tray-arrow:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--safelight); outline-offset: 2px; } .story-tray-arrow[hidden] { display: none; } .story-tray-arrow-prev { left: 0; } .story-tray-arrow-next { right: 0; } @media (max-width: 721px) { .story-tray-arrow { display: none; } } .profile-avatar-wrap.has-story { cursor: pointer; } .profile-avatar-wrap.has-story::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--line); } .profile-avatar-wrap.has-story--unseen::before { background: var(--story-ring-unseen); } .profile-avatar-wrap.has-story .profile-avatar, .profile-avatar-wrap.has-story .avatar-fallback--profile { position: relative; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--ink); } .profile-avatar-wrap.has-story .avatar-camera-btn { z-index: 2; } .has-story { position: relative; border-radius: 50%; line-height: 0; } .has-story::before { content: ""; position: absolute; inset: calc(-1 * (var(--story-ring-w) + var(--story-ring-gap))); border-radius: 50%; background: var(--line); z-index: 0; pointer-events: none; } .has-story--unseen::before { background: var(--story-ring-unseen); } .has-story > img, .has-story > i { position: relative; display: block; z-index: 1; border: 0; border-radius: 50%; box-shadow: 0 0 0 var(--story-ring-gap) var(--story-gap); } .has-story > [hidden] { display: none; } .profile-avatar-wrap.has-story { line-height: normal; } a.has-story, button.has-story { cursor: pointer; } .story-viewer { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; color: #fff; } .story-viewer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .story-stage { position: relative; height: min(100vh, 900px); height: min(100dvh, 900px); aspect-ratio: 9 / 16; max-width: 100vw; overflow: hidden; border-radius: var(--radius-l); background: #000; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } .story-stage::before, .story-stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; } .story-stage::before { top: 0; height: 110px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent); } .story-stage::after { bottom: 0; height: 150px; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); } .story-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; transition: opacity 0.15s ease; -webkit-user-drag: none; } .story-media.is-ready { opacity: 1; } .story-loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 34px; color: rgba(255, 255, 255, 0.8); pointer-events: none; } .story-loading i { animation: story-spin 0.9s linear infinite; } @keyframes story-spin { to { transform: rotate(360deg); } } .story-progress { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 6; display: flex; gap: 4px; } .story-seg { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.35); } .story-seg-fill { height: 100%; background: #fff; transform-origin: left center; transform: scaleX(0); } .story-head { position: absolute; top: 22px; left: 12px; right: 8px; z-index: 6; display: flex; align-items: center; justify-content: space-between; } .story-head-user { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; text-decoration: none; } .story-head-avatar, .story-head-avatar-fallback { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; font-size: 32px; line-height: 1; } .story-head-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; } .story-head-time { flex: none; font-size: 13px; color: rgba(255, 255, 255, 0.72); } .story-head-actions { display: flex; align-items: center; } .story-head-actions button, .story-sheet-head button { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: #fff; font-size: 20px; cursor: pointer; } .story-tap { position: absolute; top: 70px; bottom: 96px; z-index: 3; cursor: pointer; touch-action: none; } .story-burst { position: absolute; z-index: 8; font-size: 96px; color: #ff3040; pointer-events: none; transform: translate(-50%, -50%) scale(0.4); opacity: 0; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35)); animation: story-burst 0.8s ease-out forwards; } @keyframes story-burst { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .story-burst { animation-duration: 0.01s; } } .story-tap--prev { left: 0; width: 35%; } .story-tap--next { right: 0; width: 65%; } .story-caption { position: absolute; left: 0; right: 0; bottom: 84px; z-index: 4; padding: 0 22px; text-align: center; font-size: 16px; line-height: 1.35; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); overflow-wrap: anywhere; pointer-events: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .story-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); } .story-seen-btn { display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-l); background: rgba(255, 255, 255, 0.16); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .story-seen-stat { display: inline-flex; align-items: center; gap: 6px; } .story-seen-stat i { font-size: 16px; } .story-seen-stat i.ph-fill.ph-heart { color: red; } .story-seen-stat i.has-replies, .story-seen-stat i.has-replies ~ span { color: var(--strength-strong); } .story-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; flex-direction: column; max-height: 80%; border-radius: var(--radius-l) var(--radius-l) 0 0; background: #161616; color: #fff; } .story-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-weight: 600; } .story-sheet-list { overflow-y: auto; padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px)); } .story-sheet-empty { padding: 22px 18px; text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 14px; } .story-viewer-row { display: flex; align-items: center; gap: 12px; padding: 8px 18px; color: inherit; text-decoration: none; } .story-viewer-link { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; } .story-viewer-link img, .story-viewer-link > i { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font-size: 40px; line-height: 1; } .story-viewer-info { display: flex; flex: 1; flex-direction: column; min-width: 0; } .story-viewer-info b, .story-viewer-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story-viewer-info b { font-size: 14px; } .story-viewer-info small, .story-viewer-ago { font-size: 12px; color: rgba(255, 255, 255, 0.6); } .story-viewer-meta { display: flex; flex: none; align-items: center; gap: 8px; } .story-nav { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; margin: 0 18px; padding: 0; border: 0; border-radius: var(--radius-l); background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 20px; cursor: pointer; } .story-nav:hover { background: rgba(255, 255, 255, 0.28); } .story-viewer button:focus-visible, .story-viewer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 600px) { .story-stage { width: 100vw; height: 100vh; height: var(--vh100, 100dvh); aspect-ratio: auto; border-radius: 0; } .story-nav { display: none; } } .story-composer { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; } .story-composer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .story-composer-card { position: relative; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; width: min(760px, 100%); max-height: min(640px, 100%); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink); color: var(--paper); } .story-composer-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex: none; } .story-composer-head h2 { margin: 0; font-size: 16px; } .story-composer-step { margin-left: auto; margin-right: 4px; font-size: 12px; color: var(--grey-dim); } .story-composer-head button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--paper); font-size: 18px; cursor: pointer; } .story-composer-card .form-warning, .story-composer-card > .story-composer-error { margin-bottom: 0; flex: none; } .story-composer-body { display: flex; flex-direction: row; align-items: stretch; gap: 20px; flex: 1 1 auto; min-height: 0; } .story-composer-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 260px; color: var(--grey-dim); font-size: 13px; } .story-composer-loading i { font-size: 34px; animation: story-spin 0.9s linear infinite; } .story-composer-visual { display: flex; flex-direction: row; align-items: stretch; gap: 8px; flex: 0 0 auto; } .story-composer-photo { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; width: min(310px, 38vw); min-width: 0; } .story-composer-side { display: flex; flex-direction: column; justify-content: center; gap: 12px; flex: 1 1 auto; min-width: 0; } .story-composer-preview { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; background: #000; overflow: hidden; touch-action: none; cursor: default; } .story-composer-preview img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; cursor: default; touch-action: none; -webkit-user-drag: none; user-select: none; } .story-composer-preview img.story-composer-bg { top: 0; left: 0; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: blur(20px) brightness(0.55); transform: scale(1.12); pointer-events: none; cursor: default; } .story-composer-pagenav { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transform: translateY(-50%); border: 0; border-radius: var(--radius); background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 14px; cursor: pointer; } .story-composer-pagenav:disabled { opacity: 0.35; cursor: default; } .story-composer-pagenav--prev { left: 8px; } .story-composer-pagenav--next { right: 8px; } .story-composer-thumbs { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 2px 8px 2px 2px; flex: none; width: 66px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; scrollbar-gutter: stable; cursor: grab; } .story-composer-thumbs::-webkit-scrollbar { width: 6px; } .story-composer-thumbs::-webkit-scrollbar-track { background: transparent; } .story-composer-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } .story-composer-thumb { position: relative; flex: none; width: 52px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; opacity: 0.6; transition: border-color 0.15s ease, opacity 0.15s ease; } .story-composer-thumb.is-active { border-color: var(--safelight); opacity: 1; } .story-composer-thumb[draggable="true"] { cursor: grab; } .story-composer-thumb.is-dragging { opacity: 0.4; cursor: grabbing; } .story-composer-thumbs:has(.story-composer-thumb.is-dragging) { cursor: grabbing; } .story-composer-thumb.drag-over { border-color: var(--grey-dim); } .story-composer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .story-composer-thumb--loading { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--grey-dim); cursor: default; opacity: 1; pointer-events: none; } .story-composer-thumb--loading i { font-size: 20px; animation: story-spin 0.9s linear infinite; } .story-composer-thumb-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); color: #fff; pointer-events: none; } .story-composer-thumb-spinner i { font-size: 18px; animation: story-spin 0.9s linear infinite; } .story-composer-thumb-add { flex: none; width: 52px; height: 72px; padding: 0; border: 1px dashed var(--line); border-radius: 6px; background: none; color: var(--grey-dim); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; } .story-composer-thumb-add:hover { border-color: var(--safelight); color: var(--safelight); } .story-composer-thumb-remove { position: absolute; top: 1px; right: 1px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 9px; cursor: pointer; } .story-composer-caption { position: relative; display: block; } .story-composer-caption textarea { box-sizing: border-box; display: block; width: 100%; min-height: 84px; max-height: 140px; padding: 11px 58px 38px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--input-form); color: var(--paper); font: inherit; font-size: 14px; line-height: 1.35; resize: none; overflow-y: hidden; } .story-composer-caption textarea.scrolling { overflow-y: auto; } .story-composer-caption textarea:focus { outline: none; border-color: var(--safelight); } .story-composer-count { position: absolute; right: 10px; top: 11px; font-size: 11px; color: var(--grey-dim); pointer-events: none; } .story-composer-emoji-btn { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: none; border-radius: var(--radius); color: var(--grey-dim); cursor: pointer; font-size: 20px; } .story-composer-emoji-btn:hover, .story-composer-emoji-btn[aria-expanded="true"] { color: var(--paper); } .story-composer-caption .emoji-picker { left: 0; right: 0; top: calc(100% + 8px); bottom: auto; max-width: none; } .story-composer-capnav { display: none; } .story-composer-capnav button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--input-form); color: var(--paper); cursor: pointer; } .story-composer-capnav button:disabled { opacity: 0.4; cursor: default; } .story-composer-capnav .mono { font-size: 12px; color: var(--grey-dim); } .story-composer-hint { margin: -4px 0 0; font-size: 12px; color: var(--grey-dim); } .story-composer-error { padding: 9px 12px; border: 1px solid var(--danger-text); border-radius: var(--radius); color: var(--danger-text); font-size: 13px; font-weight: 600; } .story-composer-actions { display: flex; gap: 10px; } .story-composer-actions .btn { flex: 1; } .story-composer-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .story-composer-share-btn .ph-circle-notch { animation: story-share-spin 0.8s linear infinite; } @keyframes story-share-spin { to { transform: rotate(360deg); } } .story-composer-note { margin: 0; text-align: center; font-size: 12px; color: var(--grey-dim); } .story-composer-head .story-composer-step-back { display: none; } .story-composer-next-btn { display: none; } @media (max-width: 720px) { .story-composer { padding: 0; } .story-composer-card { width: 100%; max-width: none; height: 100%; height: var(--vh100, 100dvh); max-height: none; border: 0; border-radius: 0; } .story-composer-body { flex-direction: column; gap: 12px; } .story-composer-loading { flex: 1 1 auto; min-height: 0; } .story-composer-visual { flex-direction: column; gap: 10px; width: 100%; flex: 1 1 auto; min-height: 0; } .story-composer-photo { width: 100%; flex: 1 1 auto; min-height: 0; align-items: center; } .story-composer-preview { flex: 1 1 auto; width: auto; height: 100%; max-width: 100%; min-height: 0; aspect-ratio: 9 / 16; border-radius: 12px; } .story-composer-thumbs { flex-direction: row; width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; } .story-composer-side { display: none; } .story-composer-next-btn { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; width: 100%; } .story-composer[data-step="caption"] .story-composer-visual { flex: 1 1 auto; min-height: 0; } .story-composer[data-step="caption"] .story-composer-pagenav, .story-composer[data-step="caption"] .zoom-slider-wrap, .story-composer[data-step="caption"] .story-composer-thumbs, .story-composer[data-step="caption"] .story-composer-next-btn { display: none; } .story-composer[data-step="caption"] .story-composer-side { display: flex; flex: none; justify-content: flex-start; gap: 10px; } .story-composer[data-step="caption"] .story-composer-caption textarea { min-height: 64px; } .story-composer[data-step="caption"] .story-composer-head .story-composer-step-back { display: flex; } .story-composer-capnav:not([hidden]) { display: flex; align-items: center; justify-content: space-between; } .story-composer-multi-hint-desktop, .story-composer-hint { text-align: center; } .story-composer-caption .emoji-picker { top: auto; bottom: calc(100% + 8px); } } @media (prefers-reduced-motion: reduce) { .story-loading i { animation: none; } .story-media, .story-ring { transition: none; } .story-love.is-beating { animation: none; } } .story-foot { flex-wrap: wrap; } .story-reply { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; } .story-reply textarea { flex: 1; min-width: 0; height: 40px; max-height: 120px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 20px; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 15px; line-height: 20px; resize: none; overflow-y: auto; font-family: inherit; scrollbar-width: none; -ms-overflow-style: none; } .story-reply textarea::-webkit-scrollbar { display: none; width: 0; height: 0; } .story-reply textarea::placeholder { color: rgba(255, 255, 255, 0.75); } .story-reply button { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 28px; line-height: 1; display: grid; place-items: center; cursor: pointer; } .story-reply .story-love.is-active { color: #ff3040; } .story-reply .story-love.is-beating { animation: story-heartbeat 0.6s ease-in-out; } @keyframes story-heartbeat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } 40% { transform: scale(1); } 60% { transform: scale(1.25); } 80% { transform: scale(1); } } .story-reply .story-reply-send { font-size: 24px; } .story-caption { bottom: 84px; } .story-tap { bottom: 96px; } .story-stage.is-owner .story-caption { bottom: 84px; } .story-stage.is-owner .story-tap { bottom: 96px; } .story-toast { position: absolute; left: 50%; bottom: 170px; z-index: 9; max-width: 86%; transform: translateX(-50%); padding: 9px 16px; border-radius: var(--radius-l); background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 13px; text-align: center; pointer-events: none; } .story-viewer-love { flex: none; display: grid; place-items: center; width: 32px; height: 32px; font-size: 24px; line-height: 1; color: #ff3040; } .story-viewer-ago { flex: none; min-width: 34px; text-align: right; } .story-viewer-chat { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 22px; cursor: pointer; } .story-viewer-chat[aria-expanded="true"] { background: rgba(255, 255, 255, 0.18); } .story-viewer-replies { display: flex; flex-direction: column; gap: 6px; padding: 0 18px 10px 70px; } .story-viewer-reply { margin: 0; padding: 8px 12px; border-radius: var(--radius-l); background: rgba(255, 255, 255, 0.12); font-size: 14px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; } .story-menu-backdrop { position: absolute; inset: 0; z-index: 7; } .story-menu { position: absolute; top: 62px; right: 10px; z-index: 9; min-width: 210px; padding: 6px; border-radius: var(--radius-l); background: #1c1c1c; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } .story-menu > button, .story-menu > a { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; } .story-menu > button:hover, .story-menu > a:hover { background: rgba(255, 255, 255, 0.1); } .story-menu i { font-size: 18px; } .story-report { z-index: 9; overflow: hidden; } .story-report-body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 10px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .story-report-label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.75); } .story-report-reasons { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-l); background: rgba(255, 255, 255, 0.04); scrollbar-width: thin; } .story-report-reasons button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: none; color: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background 0.12s ease; } .story-report-reasons button:last-child { border-bottom: 0; } .story-report-reasons button:hover { background: rgba(255, 255, 255, 0.08); } .story-report-reasons button i { flex: none; width: 20px; font-size: 18px; text-align: center; color: rgba(255, 255, 255, 0.6); } .story-report-reasons button span { flex: 1; min-width: 0; } .story-report-reasons button::after { content: ""; flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; } .story-report-reasons button[aria-checked="true"] { background: rgba(255, 255, 255, 0.12); font-weight: 600; } .story-report-reasons button[aria-checked="true"] i { color: var(--safelight, #fff); } .story-report-reasons button[aria-checked="true"]::after { border-color: var(--safelight, #fff); background: radial-gradient( circle, var(--safelight, #fff) 0 4px, transparent 5px ); } .story-report-reasons button:focus-visible { outline: 2px solid var(--safelight, #fff); outline-offset: -2px; } .story-report-body textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; background: #0d0d0d; color: #fff; font: inherit; font-size: 14px; } .story-report-body textarea { resize: none; } .story-report-meta { text-align: right; font-size: 11px; color: rgba(255, 255, 255, 0.55); } .story-tabs { display: flex; gap: 6px; } .story-tabs button { flex: 1; padding: 9px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: var(--grey); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .story-tabs button.is-active { border-color: var(--safelight); color: var(--paper); } .story-settings-help { margin: 0; font-size: 12px; color: var(--grey-dim); } .story-settings-search { position: relative; display: flex; align-items: center; margin-top: 10px; } .story-settings-search i.ph-magnifying-glass { position: absolute; left: 14px; color: var(--grey-dim); font-size: 14px; pointer-events: none; } .story-settings-filter { box-sizing: border-box; width: 100%; padding: 10px 40px 10px 38px; border: 1px solid var(--line); border-radius: 20px; background: var(--ink-raised); color: var(--paper); font: inherit; font-size: 14px; } .story-settings-filter:focus { outline: none; border-color: var(--safelight); } .story-settings-search .search-clear { position: absolute; right: 10px; } .story-settings-list { min-height: 120px; max-height: 40vh; overflow-y: auto; margin-top: 10px; } .story-settings-empty { padding: 26px 8px; text-align: center; font-size: 13px; color: var(--grey-dim); } .story-person { display: flex; align-items: center; gap: 10px; padding: 7px 2px; } .story-person img, .story-person > i { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; font-size: 38px; line-height: 1; } .story-person-info { display: flex; flex: 1; flex-direction: column; min-width: 0; } .story-person-info b, .story-person-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story-person-info b { font-size: 14px; } .story-person-info small { font-size: 12px; color: var(--grey); } .story-archive-note { margin: 0 0 14px; font-size: 13px; color: var(--grey); } .story-archive-month { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); } .story-archive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; min-width: 0; } @media (min-width: 480px) { .story-archive-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .story-archive-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1100px) { .story-archive-grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1300px) { .story-archive-grid { grid-template-columns: repeat(6, 1fr); } } .story-archive-item { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; padding: 0; border: 0; border-radius: var(--radius); background: var(--ink-raised); cursor: pointer; min-width: 0; } .story-archive-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } .story-archive-item:hover img { transform: scale(1.03); } .story-archive-item:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; } .story-archive-scrim { position: absolute; inset: auto 0 0 0; height: 56%; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); pointer-events: none; } .story-archive-meta { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 12px; font-weight: 500; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .story-archive-stats { display: inline-flex; align-items: center; gap: 3px; } .story-archive-live { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--safelight); color: #fff; font-size: 11px; font-weight: 600; } .story-archive-empty-after { padding: 30px 0; text-align: center; color: var(--grey); }