/* StoryHideout design system. * * One stylesheet for every customer-facing page, logged out and logged in. * It replaces site.css (now Admin Center only), library.css, ui.css and * app-pages.css, so nothing loaded after it can out-rank a rule by source * order. Nothing is scoped to a body class: a component looks the same on * every page. * * Direction: a compact, dark, application-first utility. The product widget * is the hero, surfaces are slightly lighter than the page with a hairline * border, most sections have no box at all, media leads, and controls are * small. The neutrals follow permaloop.io's measured surface hierarchy; * primary actions are light, and StoryHideout violet marks focus, links and * small state details only. Green, amber and red carry status. * * Contents * 1 Tokens * 2 Base * 3 Shell: side panel, profile menu, phone top bar and drawer, page, * footer * 4 Primitives: surface, card, divider, button, icon button, segmented * control, input, search, select, menu, badge, avatar, progress, * skeleton, spinner, notice, toast, modal, bottom sheet, toggle * 5 Product components: results, creator card, viewer, empty/error * states, pricing, storage usage, settings sections, FAQ, auth * 6 Page bindings for markup built in page scripts * 7 Responsive * 8 Legacy pages on the shared shell * 9 Vault * 10 Home (signed in) * 11 Tool pages * 12 SEO tool pages * 13 Public homepage * 14 Stories (grid, tile, toolbar, creator library, viewer) and the * signed-in Home's universal input, recent Stories and Vault rows * * Several components are refined in a later section as well as their * first one (universal input, Story viewer, Vault cards, pricing). Search * for the component's class before adding a rule, and extend the latest * block rather than starting another. */ /* Main UI typeface: local variable font avoids a remote blocking stylesheet. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-ext-400-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-400-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Brand-only typeface; bundled locally so the wordmark renders consistently. Archivo ExtraBold at 106% width, capitals only (A-Z), for the all-caps wordmark. */ @font-face{font-family:'StoryHideout Wordmark';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/archivo-106-800-caps.woff2') format('woff2');unicode-range:U+0041-005A;} /* Navigation wordmark (side panel, drawer and phone top bar): the full StoryHideout name in Plus Jakarta Sans SemiBold, Latin only. */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* 1 ─ Tokens ───────────────────────────────────────────────────────────── */ /* The neutral system is sampled from permaloop.io (desktop, 2026-09-27) and reproduces its surface hierarchy: a flat #181818 page, cards one step up, the main composer and inputs two steps up, and selected controls three. Borders sit only slightly above the surface they wrap. StoryHideout's violet (#A5A6FF) is the accent and is used sparingly: focus, links, progress, the headline highlight and small status marks. */ :root{ --bg-page:#181818; --bg-surface-1:#1d1d1e; --bg-surface-2:#232325; --bg-input:#232325; --bg-hover:#29292b; --bg-selected:#303031; --border-default:#2d2d2f; --border-panel:#2f2f31; --border-strong:#353537; --border-hover:#3c3c3e; --border-rail:#2a2a2b; --text-primary:#f6f5f4; --text-secondary:#a4a5a7; --text-muted:#8b8c8e; --accent:#A5A6FF; --accent-hover:#BDBEFF; /* The darker band behind the Home and tool-page heroes. The two-tone hero-over-page contrast is intentional; keep both. */ --bg-hero:#101012; /* App pages (Monitor, pricing), measured from permaloop.io on 2026-09-27: cards and fields sit on #232325, card borders on #2e2e30, field borders one step brighter, and segmented tabs on their own #272728 track. */ --bg-card:#232325; --border-card:#2e2e30; --border-field:#353537; --bg-seg:#272728; --bg-seg-on:#3c3c3c; --radius-card:20px; --radius-field:16px; --radius-control:12px; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:40px; --control-height-sm:36px; --control-height-md:40px; --control-height-lg:48px; --font-size-display:52px; --font-size-page:22px; --font-size-section:17px; --font-size-body:14px; --font-size-input:15px; --font-size-control:13px; --font-size-meta:12px; /* Desktop side panel: the collapsed icon rail and the expanded labelled panel. --sidebar-w is whichever is showing (html[data-sidebar], set before first paint by sidebar-state.js); every offset beside the panel uses it, never a fixed number. */ --rail-w:76px; --sidebar-expanded-w:272px; --sidebar-w:var(--rail-w); /* The panel sits one step below the page (Design C, "Premium"). */ --bg-sidebar:#141415; --border-sidebar:#232325; --bg-sidebar-hover:#1d1d1f; --bg-sidebar-active:rgba(165,166,255,.10); --bg-sidebar-card:#1b1b1d; --border-sidebar-card:#262628; --composer-w:680px; --result-photos-w:880px; --page-max:1200px; /* Dense app pages (Admin): the same centred frame, a little wider. */ --page-wide:1280px; /* Application workspaces (Home, Search, Tracking): wide enough for a main column and a side column, centred so ultrawide screens keep a composed page instead of a stretched one. */ --page-app-max:1400px; --page-browse-max:2400px; --gutter:24px; --page-browse-gutter:clamp(var(--gutter),2vw,40px); /* Smallest track of the shared grids (media tiles, preview cards). A browse page raises them with the viewport so wider screens get larger cards, not just more of them. */ --grid-media-min:168px; --grid-card-min:300px; --header-h:56px; --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; /* Short names the components below use, mapped onto the system above. */ --bg:var(--bg-page); --bg-sunken:var(--bg-input); --surface:var(--bg-surface-1); --surface-2:var(--bg-surface-2); --surface-3:var(--bg-selected); --hover:var(--bg-hover); --line:var(--border-default); --line-2:var(--border-strong); --line-3:var(--border-hover); --text:var(--text-primary); --text-2:var(--text-secondary); --text-3:var(--text-muted); --accent-2:var(--accent-hover); --accent-soft:rgba(165,166,255,.12); --accent-line:rgba(165,166,255,.42); --on-light:#181818; /* Light primary buttons brighten to pure white on hover. */ --primary-hover:#fff; --danger:#c93c3c; --danger-hover:#d04141; --scrollbar:#34343b; --ok:#34D399; --warn:#FBBF24; --err:#F87171; /* Premium, not a status: a muted gold kept apart from --warn so an upgrade never reads as a warning. */ --gold:#E2BC6A; --gold-strong:#F0CD82; --gold-soft:rgba(226,188,106,.08); --gold-soft-hover:rgba(226,188,106,.15); --gold-line:rgba(226,188,106,.28); --gold-line-hover:rgba(226,188,106,.55); --scrim:rgba(8,8,8,.7); --r-xs:6px; --r-sm:var(--radius-sm); --r-md:10px; --r-lg:var(--radius-md); --r-xl:var(--radius-lg); --shadow-panel:none; --shadow-pop:0 12px 32px -8px rgba(0,0,0,.55); --focus:0 0 0 3px rgba(165,166,255,.22); --h-sm:32px; --h-md:var(--control-height-md); --h-lg:var(--control-height-lg); /* Layers, timing and breakpoints. Use these names in new rules; older rules still carry the same literal numbers. Media queries cannot read custom properties, so a query writes the breakpoint as a number: (min-width:768px) from a breakpoint up, (max-width:767px) below it. */ --z-sticky:60; --z-nav:70; --z-banner:120; --z-modal:150; --z-gate:160; --z-toast:200; --z-skip:1000; --duration-fast:.12s; --duration-base:.15s; --duration-slow:.18s; --bp-xs:360px; --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1200px; /* Names older page scripts still read. */ --background:var(--bg-page); --border:var(--border-default); --surface-raised:var(--bg-surface-2); } /* 2 ─ Base ─────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;} [hidden]{display:none!important;} /* The scrollbar's space is always reserved, so a short page (Contact) and a long one (Vault) lay out at the same width and nothing shifts sideways when you move between them on systems with classic scrollbars. */ html{color-scheme:dark;background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);scrollbar-gutter:stable;} /* Only the page background colour shows in the scrollbar's space, so on pages that open with the dark hero band (Home, tool pages) it is the band's colour (--bg-hero), and the band reaches the window's right edge. */ html:has(.tv-home-hero,.tv-seo-hero){background:var(--bg-hero);} body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5; font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;} /* Every page is main then footer: the page fills the window, so on a short page the footer sits at the bottom instead of halfway up the screen. */ body{display:flex;flex-direction:column;} body>main{flex:1 0 auto;} body>.tv-footer{flex:none;} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;color:var(--text);} p{margin:0;} a{color:inherit;} img,video{max-width:100%;} button,input,select,textarea{font:inherit;color:inherit;} button{cursor:pointer;} ::selection{background:var(--accent);color:var(--on-light);} ::placeholder{color:var(--text-3);opacity:1;} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;} *{scrollbar-color:var(--scrollbar) transparent;scrollbar-width:thin;} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;} .skip-link{position:fixed;left:12px;top:10px;z-index:1000;padding:8px 12px;border:1px solid var(--accent-line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px;font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .15s;} .skip-link:focus{transform:none;} body.modal-open{overflow:hidden;} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;} .muted{color:var(--text-2);} .app-icon{width:16px;height:16px;flex:none;} @keyframes tvSpin{to{transform:rotate(360deg);}} @keyframes tvPulse{0%,100%{opacity:.45}50%{opacity:.8}} @keyframes tvRise{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} /* 3 ─ Shell ────────────────────────────────────────────────────────────── */ /* Desktop side panel, in two widths on one set of markup (Design C, "Premium", from the StoryHideout visual refresh canvas). The panel is a deeper surface (--bg-sidebar) than the page with a hairline right border. Collapsed is a 76px icon rail: 44px rounded buttons, 20px icons, labels as hover tips. Expanded (272px) shows the same buttons as rows with their labels and the full StoryHideout wordmark. Both share one geometry: the symbol sits 23px from the edge and every nav icon 28px from it in either width, and the brand block is 70px tall in both (one 44px row + 26), so nothing moves when the panel opens or closes. The current place gets a soft violet tint, a violet icon and a 3px violet bar on the panel's edge. The account and Upgrade sit together in one card at the bottom. The same markup becomes a labelled drawer below 1024px. */ .tv-header{position:fixed;top:0;bottom:0;left:0;z-index:70;display:flex;width:var(--sidebar-w); background:var(--bg-sidebar);border-right:1px solid var(--border-sidebar);} .tv-header-row{--panel-px:16px;display:flex;flex-direction:column;align-items:flex-start;width:100%;height:100%;padding:18px var(--panel-px) 14px;} /* Collapsed: the logo alone in its 44px cell. The expand button sits on top of it and shows (in place of the logo) when the pointer is over the cell or it has keyboard focus, so clicking the logo of a collapsed rail opens it. */ .tv-header-brand{position:relative;display:flex;align-items:center;width:100%;height:44px;margin:0 0 26px;} .tv-brand{display:inline-flex;align-items:center;gap:9px;flex:none;color:var(--text);font-family:'StoryHideout Wordmark',var(--font);font-size:15.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1;text-decoration:none;border-radius:var(--radius-sm);} /* The approved S symbol in a square box (its viewBox is square). */ .tv-logo{display:block;flex:none;width:26px;height:26px;object-fit:contain;} /* Navigation spells the name in full, in mixed case: Plus Jakarta Sans SemiBold, 17px in the panel and 15px in the phone top bar. The footer keeps its own all-caps wordmark. */ .tv-header .tv-brand,.tv-topbar .tv-brand{gap:11px;} .tv-header .tv-brand-name,.tv-topbar .tv-brand-name{font-family:'Plus Jakarta Sans',var(--font);font-size:17px;font-weight:600;letter-spacing:-.01em;text-transform:none;white-space:nowrap;} .tv-topbar .tv-brand-name{font-size:15px;} .tv-header .tv-brand{display:grid;place-items:center;width:44px;height:44px;} .tv-header .tv-brand .tv-logo{width:30px;height:30px;} .tv-header .tv-brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);} .tv-header .tv-nav-close{display:none;} .tv-header .tv-sidebar-toggle{position:absolute;left:0;top:0;width:44px;height:44px;border:0;border-radius:12px;color:var(--text-secondary);opacity:0;transition:opacity .12s,background-color .15s,color .15s;} .tv-header .tv-sidebar-toggle .app-icon{width:20px;height:20px;} .tv-header .tv-logo{transition:opacity .12s;} @media (min-width:1024px){ html:not([data-sidebar="expanded"]) .tv-header-brand:hover .tv-sidebar-toggle, html:not([data-sidebar="expanded"]) .tv-header .tv-sidebar-toggle:focus-visible{opacity:1;background:var(--bg-hover);color:var(--text-primary);} html:not([data-sidebar="expanded"]) .tv-header-brand:hover .tv-logo, html:not([data-sidebar="expanded"]) .tv-header-brand:has(.tv-sidebar-toggle:focus-visible) .tv-logo{opacity:0;} } .tv-nav a,.tv-rail-btn{position:relative;display:flex;align-items:center;gap:14px;width:44px;height:44px;flex:none;padding:0 12px; border-radius:12px;color:var(--text-secondary);font-size:14.5px;font-weight:500;line-height:20px;text-decoration:none;transition:background-color .15s,color .15s;-webkit-tap-highlight-color:transparent;} .tv-nav a .app-icon,.tv-rail-btn .app-icon{width:20px;height:20px;} .tv-nav a:hover,.tv-rail-btn:hover{background:var(--bg-sidebar-hover);color:var(--text-primary);} .tv-nav a[aria-current="page"]{background:var(--bg-sidebar-active);color:var(--text-primary);} .tv-nav a[aria-current="page"] .app-icon{color:var(--accent);} /* The 3px bar sits on the panel's own left edge, whatever the padding. */ .tv-nav a[aria-current="page"]::before{content:"";position:absolute;left:calc(-1 * var(--panel-px));top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);} .tv-nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-width:0;} .tv-rail-label{position:absolute;left:calc(100% + 12px);top:50%;z-index:5;padding:5px 9px;border:1px solid var(--border-strong);border-radius:var(--radius-sm); background:var(--bg-selected);color:var(--text-primary);font-size:12px;font-weight:500;line-height:16px;white-space:nowrap; opacity:0;pointer-events:none;transform:translate(-4px,-50%);transition:opacity .12s,transform .12s;} /* The hover tooltip belongs to the desktop panel only. In the phone drawer the label is plain text, and this nudge would lift it half a line. */ @media (min-width:1024px){ .tv-nav a:hover .tv-rail-label,.tv-rail-btn:hover .tv-rail-label,.tv-sidebar-toggle:hover .tv-rail-label, .tv-nav a:focus-visible .tv-rail-label,.tv-rail-btn:focus-visible .tv-rail-label,.tv-sidebar-toggle:focus-visible .tv-rail-label{opacity:1;transform:translate(0,-50%);} } /* A tap never leaves a ring or a tap flash anywhere in the side panel or the phone top bar, including in browsers without :focus-visible. Keyboard focus in the side panel is a quiet light ring inside the row, not the violet accent. */ .tv-header,.tv-topbar{-webkit-tap-highlight-color:transparent;} .tv-header:focus,.tv-nav a:focus,.tv-rail-btn:focus,.tv-account-btn:focus,.tv-nav-close:focus,.tv-menu-btn:focus,.tv-sidebar-toggle:focus{outline:none;} .tv-nav a:focus-visible,.tv-rail-btn:focus-visible,.tv-account-btn:focus-visible,.tv-nav-close:focus-visible,.tv-menu-btn:focus-visible,.tv-sidebar-toggle:focus-visible{outline:2px solid rgba(246,245,244,.5);outline-offset:-2px;} .tv-header-end{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;margin-top:auto;} .tv-header-end[data-state="pending"]{visibility:hidden;} /* Signed out: the rail offers sign-up as one more icon above Log in; the expanded panel and the drawer show two centered pills: Log in above the primary "Create free account" action. */ .tv-header-end .tv-rail-signup{display:none;} .tv-header-end .tv-rail-join{color:var(--text-primary);} .tv-header-end .tv-rail-signup.tv-btn{align-items:center;justify-content:center;width:100%;height:40px;min-height:40px;margin:0;padding:0 16px;border:0;border-radius:var(--radius-pill); background:var(--text-primary);color:var(--on-light);font-size:14px;font-weight:600;} .tv-header-end .tv-rail-signup.tv-btn:hover{background:var(--primary-hover);} /* Signed in: one card holds who is signed in (avatar, email and a plan chip, opening the account menu) and, below it, Upgrade plan. In the rail the card drops its frame and Upgrade becomes a gold icon above the avatar. */ .tv-account-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;} .tv-account{position:relative;width:100%;} .tv-account-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--text);text-align:left;transition:background-color .15s;} .tv-account-btn:hover,.tv-account-btn[aria-expanded="true"]{background:var(--bg-sidebar-hover);} .tv-avatar-btn{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-selected);color:var(--text);font-size:13px;font-weight:600;} .tv-account-menu .tv-avatar-btn{width:32px;height:32px;} .tv-account-who,.tv-account-chevron{display:none;} .tv-account-who strong{font-size:13px;font-weight:600;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tv-plan-chip{display:inline-flex;align-items:center;align-self:flex-start;max-width:100%;height:18px;padding:0 7px;border-radius:var(--radius-pill); background:rgba(165,166,255,.12);color:#C9CAFF;font-size:11px;font-weight:600;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* A small account card, not a second navigation: who is signed in, the way to Settings and Log out. It opens beside the panel, from the bottom. */ .tv-menu.tv-account-menu{left:calc(100% + 10px);bottom:0;top:auto;right:auto;min-width:248px;} .tv-account-head{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;border-bottom:1px solid var(--line);margin:0 0 4px;} .tv-account-head>div{display:flex;flex-direction:column;gap:1px;min-width:0;} .tv-account-head strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tv-account-head span:not(.tv-avatar-btn){font-size:12px;color:var(--text-3);} /* Upgrade plan: gold, never a warning colour, on a faint gold tint inside a gold hairline. Hidden on the top plan (see shell.js). In the rail it is a 44px gold square above the avatar. */ .tv-rail-btn.tv-upgrade{order:-1;justify-content:center;padding:0;border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold);transition:background-color .15s,border-color .15s,color .15s;} .tv-rail-btn.tv-upgrade:hover{border-color:var(--gold-line-hover);background:var(--gold-soft-hover);color:var(--gold-strong);} .tv-rail-btn.tv-upgrade:focus-visible{outline-color:var(--gold-line-hover);} /* Expanded: the same buttons as full-width rows with their labels. Logo and name on the left of the brand row, the collapse button on its right. Scoped to desktop so the drawer below 1024px is untouched. */ @media (min-width:1024px){ html[data-sidebar="expanded"]{--sidebar-w:var(--sidebar-expanded-w);} html[data-sidebar="expanded"] .tv-header-row{--panel-px:14px;align-items:stretch;} html[data-sidebar="expanded"] .tv-header-brand{justify-content:space-between;gap:8px;} html[data-sidebar="expanded"] .tv-header .tv-brand{display:inline-flex;justify-content:flex-start;flex:0 1 auto;width:auto;min-width:0;padding:0 0 0 9px;overflow:hidden;} html[data-sidebar="expanded"] .tv-header .tv-brand-name{position:static;width:auto;height:auto;overflow:hidden;clip-path:none;text-overflow:ellipsis;} html[data-sidebar="expanded"] .tv-header .tv-sidebar-toggle{position:relative;flex:none;width:32px;height:32px;border-radius:var(--radius-sm);opacity:1;background:none;color:var(--text-muted);} html[data-sidebar="expanded"] .tv-header .tv-sidebar-toggle .app-icon{width:18px;height:18px;} html[data-sidebar="expanded"] .tv-header .tv-sidebar-toggle:hover{background:var(--bg-hover);color:var(--text-primary);} html[data-sidebar="expanded"] .tv-nav,html[data-sidebar="expanded"] .tv-header-end{align-items:stretch;} html[data-sidebar="expanded"] .tv-nav a,html[data-sidebar="expanded"] .tv-header-end .tv-rail-btn{width:auto;min-width:0;padding:0 14px;} html[data-sidebar="expanded"] .tv-nav .tv-rail-label,html[data-sidebar="expanded"] .tv-header-end .tv-rail-label{position:static;min-width:0;padding:0;border:0;background:none;color:inherit; font-size:inherit;line-height:inherit;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:none;transition:none;} html[data-sidebar="expanded"] .tv-header-end .tv-rail-join{display:none;} html[data-sidebar="expanded"] .tv-header-end .tv-rail-login{justify-content:center;gap:8px;height:40px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);font-size:14px;font-weight:600;} html[data-sidebar="expanded"] .tv-header-end .tv-rail-login .app-icon{width:18px;height:18px;} html[data-sidebar="expanded"] .tv-header-end[data-state="out"]{gap:8px;} html[data-sidebar="expanded"] .tv-header-end .tv-rail-signup.tv-btn{display:inline-flex;} html[data-sidebar="expanded"] .tv-account-card{align-items:stretch;gap:10px;padding:10px;border:1px solid var(--border-sidebar-card);border-radius:14px;background:var(--bg-sidebar-card);} html[data-sidebar="expanded"] .tv-account-btn{display:flex;align-items:center;gap:10px;width:calc(100% + 8px);height:auto;margin:-4px;padding:4px;overflow:hidden;border-radius:10px;} html[data-sidebar="expanded"] .tv-account-who{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;} html[data-sidebar="expanded"] .tv-account-chevron{display:block;flex:none;color:var(--text-3);} html[data-sidebar="expanded"] .tv-header-end .tv-rail-btn.tv-upgrade{order:0;gap:8px;height:36px;padding:0 12px;border-radius:10px;font-size:13.5px;font-weight:600;} html[data-sidebar="expanded"] .tv-rail-btn.tv-upgrade .app-icon{width:17px;height:17px;} html[data-sidebar="expanded"] .tv-header-end .tv-upgrade .tv-rail-label{flex:none;} } /* Opening or closing animates the width only when the visitor toggles it (shell.js adds .tv-sidebar-anim for the length of the transition), never on page load, and never with reduced motion. */ @media (min-width:1024px) and (prefers-reduced-motion:no-preference){ html.tv-sidebar-anim .tv-header{transition:width .18s ease;} html.tv-sidebar-anim body.has-side-nav{transition:padding-left .18s ease;} } html.tv-sidebar-anim .tv-header-row{overflow:hidden;} /* Top bar and drawer: phones and tablets only. */ .tv-topbar,.tv-nav-scrim{display:none;} @media (min-width:1024px){ /* Reserve the rail before deferred shell.js mounts it. */ html[data-sidebar] body[data-shell],body.has-side-nav{padding-left:var(--sidebar-w);} body.has-side-nav .app-toast-stack{left:calc(50% + var(--sidebar-w) / 2);} body.has-side-nav .analytics-notice{left:calc(var(--sidebar-w) + 16px);} } @media (max-width:1023px){ /* Reserve the top bar until shell.js inserts the real navigation. */ html[data-sidebar] body[data-shell]:not(.has-side-nav)::before{content:"";display:block;height:var(--header-h);} .tv-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:6px;height:var(--header-h);padding:0 var(--gutter) 0 calc(var(--gutter) - 8px); background:var(--bg-page);border-bottom:1px solid transparent;transition:border-color .2s;} .tv-topbar.is-scrolled{border-bottom-color:var(--border-rail);} .tv-topbar-end{display:flex;align-items:center;margin-left:auto;} .tv-menu-btn{width:40px;height:40px;} .tv-menu-btn .app-icon{width:20px;height:20px;} .tv-header{width:min(288px,86vw);transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:var(--shadow-pop);} body.nav-open .tv-header{transform:none;visibility:visible;transition:transform .22s ease;} .tv-header-row{--panel-px:10px;align-items:stretch;padding:10px var(--panel-px) calc(14px + env(safe-area-inset-bottom));overflow-y:auto;} .tv-header-brand{flex-direction:row;align-items:center;justify-content:space-between;height:44px;padding:0 4px 0 10px;margin:0 0 10px;} .tv-header .tv-sidebar-toggle{display:none;} .tv-header .tv-brand{display:inline-flex;width:auto;height:auto;min-width:0;} .tv-header .tv-brand .tv-logo{width:28px;height:28px;} .tv-header .tv-brand-name{position:static;width:auto;height:auto;overflow:hidden;clip-path:none;text-overflow:ellipsis;} .tv-header .tv-nav-close{display:inline-grid;flex:none;} .tv-nav a,.tv-rail-btn{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:auto;height:44px;padding:0 14px;} .tv-header-end .tv-rail-signup.tv-btn{display:inline-flex;} .tv-header-end .tv-rail-join{display:none;} .tv-header-end .tv-rail-login{justify-content:center;gap:8px;height:40px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);font-size:14px;font-weight:600;} .tv-header-end .tv-rail-login .app-icon{width:18px;height:18px;} .tv-header-end[data-state="out"]{gap:8px;} .tv-nav{align-items:stretch;} .tv-rail-label{position:static;padding:0;border:0;background:none;color:inherit;font-size:inherit;line-height:inherit;opacity:1;transform:none;transition:none;} .tv-nav a:active{background:var(--bg-sidebar-active);color:var(--text-primary);} .tv-header-end{align-items:stretch;padding-top:12px;} .tv-account-card{align-items:stretch;gap:10px;padding:10px;border:1px solid var(--border-sidebar-card);border-radius:14px;background:var(--bg-sidebar-card);} .tv-account-btn{display:flex;align-items:center;gap:10px;width:calc(100% + 8px);height:auto;margin:-4px;padding:4px;border-radius:10px;} .tv-account-who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;} .tv-account-chevron{display:block;color:var(--text-3);} .tv-rail-btn.tv-upgrade{order:0;justify-content:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;font-size:13.5px;font-weight:600;} .tv-rail-btn.tv-upgrade .app-icon{width:17px;height:17px;} .tv-rail-btn.tv-upgrade:active{color:var(--gold-strong);} .tv-menu.tv-account-menu{left:0;right:0;bottom:calc(100% + 6px);min-width:0;} .tv-nav-scrim{display:block;position:fixed;inset:0;z-index:69;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s;} body.nav-open .tv-nav-scrim{opacity:1;pointer-events:auto;} body.nav-open{overflow:hidden;} } /* Page frame. Every page states its intent on
: tv-page--focused one task or a modest amount of content: centred and capped (--narrow tightens it for prose and forms). tv-page--app an application workspace (Home, Search, Tracking): a main column and a side column, centred at --page-app-max; each page collapses its columns with a container query, so the sidebar's width is already accounted for. tv-page--browse scanning or managing a collection: fills the canvas beside the side rail with an even gutter, and lets the shared grids grow their cards with it. Components keep their own widths inside either mode: a search field or the add-creator form stays its size on a browse page. A bare .tv-page is treated as focused. Phones and tablets look the same in both modes. */ .tv-page{width:100%;max-width:var(--page-max);margin:0 auto;padding:32px var(--gutter) 72px;} .tv-page--focused{max-width:var(--page-max);} .tv-page--narrow{max-width:760px;} .tv-page--app{max-width:var(--page-app-max);} body:has(>.tv-page--app) .tv-footer-row{max-width:var(--page-app-max);} .tv-page--browse{max-width:var(--page-browse-max);padding-inline:var(--page-browse-gutter); --grid-media-min:clamp(168px,calc(100px + 6.25vw),280px); --grid-card-min:clamp(280px,calc(160px + 7vw),360px);} body:has(>.tv-page--browse) .tv-footer-row{max-width:var(--page-browse-max);padding-inline:var(--page-browse-gutter);} .tv-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 24px;} .tv-page-head h1{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.03em;} .tv-page-head p{margin:4px 0 0;color:var(--text-2);font-size:14px;line-height:21px;} .tv-page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .tv-page-head-main{display:flex;align-items:center;gap:16px;min-width:0;} .tv-page-head-copy{min-width:0;} .tv-page-head .tv-creator-handle{margin:2px 0 0;color:var(--text-2);font-size:13px;} .tv-creator-status.is-warning{color:var(--warn);} .tv-page-head.is-creator{align-items:center;margin-bottom:24px;} .tv-page-head.is-creator h1{overflow-wrap:anywhere;} .tv-page-head.is-creator #storySubtitle{color:var(--text-3);font-size:12.5px;} .tv-section{margin:0;padding:40px 0;} .tv-section+.tv-section{border-top:1px solid var(--line);} .tv-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;} .tv-section-head h2{font-size:17px;line-height:24px;} .tv-section-head p,.tv-section-head span{color:var(--text-2);font-size:13px;} .tv-section-head a{color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;} .tv-section-head a:hover{color:var(--text);} .tv-stack{display:flex;flex-direction:column;gap:24px;} .tv-hero+.tv-section{margin-top:40px;} /* Footer: a compact utility bar. Brand left, support and legal links right, the disclaimer on one quiet line underneath. No product links or headings. */ .tv-footer{border-top:1px solid var(--line);margin-top:24px;} .tv-footer-row{max-width:var(--page-max);margin:0 auto;padding:16px var(--gutter) 18px;} .tv-footer-top{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;} .tv-footer .tv-brand{font-size:14.5px;gap:8px;} .tv-footer .tv-brand img{width:22px;height:22px;} .tv-footer-note{margin:8px 0 0;color:var(--text-3);font-size:12px;line-height:16px;} .tv-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;} .tv-footer-links a{color:var(--text-3);font-size:13px;line-height:20px;text-decoration:none;transition:color .15s;} .tv-footer-links a+a::before{content:"·";display:inline-block;padding:0 9px;color:var(--text-3);pointer-events:none;} .tv-footer-links a:hover,.tv-footer-links a:focus-visible{color:var(--text);} /* 4 ─ Primitives ───────────────────────────────────────────────────────── */ /* Surface: the elevated panel. Used for the homepage action, forms, plans, compact account areas and modal content. */ .tv-surface{position:relative;min-width:0;padding:24px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-panel);} /* Card: an actionable item. Restrained hover: the border brightens, nothing moves. */ /* Buttons: pills, as Permaloop's Save. Primary is light, secondary sits on --bg-surface-2 with a hairline, ghost is text. Three sizes; nothing is large by default. */ .tv-btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-danger-outline{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h-md);min-height:var(--h-md);padding:0 14px; border:1px solid transparent;border-radius:var(--radius-pill);font-size:13.5px;font-weight:600;line-height:1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer; transition:background-color .15s,border-color .15s,color .15s,opacity .15s;-webkit-tap-highlight-color:transparent;} .tv-btn .app-icon,.btn-primary .app-icon,.btn-secondary .app-icon,.btn-ghost .app-icon,.btn-danger .app-icon,.btn-danger-outline .app-icon{width:15px;height:15px;} .tv-btn--primary,.btn-primary{background:var(--text);color:var(--on-light);} .tv-btn--primary:hover,.btn-primary:hover{background:var(--primary-hover);} .tv-btn--secondary,.btn-secondary{background:var(--bg-selected);border-color:transparent;color:var(--text);} .tv-btn--secondary:hover,.btn-secondary:hover{background:var(--border-hover);} .tv-btn--ghost,.btn-ghost{background:transparent;color:var(--text-2);} .tv-btn--ghost:hover,.btn-ghost:hover{background:var(--hover);color:var(--text);} .tv-btn--accent{background:var(--accent);color:var(--on-light);} .tv-btn--accent:hover{background:var(--accent-2);} .btn-danger,.tv-btn--danger{background:var(--danger);color:#fff;} .btn-danger:hover,.tv-btn--danger:hover{background:var(--danger-hover);} .btn-danger-outline{background:transparent;border-color:rgba(248,113,113,.35);color:var(--err);} .btn-danger-outline:hover{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.55);} .tv-btn--sm{height:var(--h-sm);min-height:var(--h-sm);padding:0 12px;font-size:13px;} .tv-btn--lg{height:var(--h-lg);min-height:var(--h-lg);padding:0 18px;font-size:14px;} .tv-btn--block{width:100%;} .tv-btn:disabled,.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled,.btn-danger:disabled,.btn-danger-outline:disabled, .tv-btn[aria-disabled="true"],.btn-primary[aria-disabled="true"]{opacity:.45;cursor:not-allowed;} .ap-link{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--accent);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;} .ap-link:hover{color:var(--accent-2);} .ap-link .app-icon{width:14px;height:14px;} .ap-link.is-muted{color:var(--text-2);} .ap-link.is-muted:hover{color:var(--text);} .tv-quiet-link{display:inline-flex;align-items:center;gap:5px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;} .tv-quiet-link:hover{color:var(--text);} .tv-quiet-link .app-icon{width:14px;height:14px;} /* Icon button: borderless until hovered. */ .tv-icon-btn,.lib-ib{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;padding:0;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:pointer; transition:color .15s,background-color .15s,border-color .15s;} .tv-icon-btn:hover,.lib-ib:hover{color:var(--text);background:var(--hover);} .tv-icon-btn .app-icon,.lib-ib .app-icon{width:16px;height:16px;} .tv-icon-btn:disabled,.lib-ib:disabled{opacity:.4;cursor:not-allowed;} .lib-ib[aria-pressed="true"]{color:var(--accent);} .lib-ib.is-saved{color:var(--ok);} @media (pointer:coarse){.tv-icon-btn,.lib-ib{width:38px;height:38px;}} /* Segmented control: one track, one raised selected segment. The same component drives the homepage modes, Stories/Creators, media filters and plan tabs. Works with buttons (aria-pressed / aria-selected) and links (aria-current). */ .tv-seg,.lib-tabs{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:4px;border:0;border-radius:var(--radius-md);background:var(--bg-seg);overflow-x:auto;scrollbar-width:none;} .tv-seg::-webkit-scrollbar,.lib-tabs::-webkit-scrollbar{display:none;} .tv-seg>button,.tv-seg>a,.lib-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 18px;border:0;border-radius:10px;background:transparent; color:var(--text-2);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;} .tv-seg>button:hover,.tv-seg>a:hover,.lib-tab:hover{color:var(--text);} .tv-seg>[aria-pressed="true"],.tv-seg>[aria-selected="true"],.tv-seg>[aria-current="page"],.lib-tab[aria-pressed="true"],.lib-tab[aria-selected="true"]{ color:var(--text);background:var(--bg-seg-on);} .tv-seg .app-icon,.lib-tab .app-icon{width:15px;height:15px;} .lib-tab .lib-count{margin-left:2px;color:var(--text-3);font-variant-numeric:tabular-nums;} .lib-tab[aria-pressed="true"] .lib-count{color:var(--text-2);} /* Inputs. One height per size, a surface that matches the panel around it, and a clear violet focus ring. */ .form-field input,.form-field select,.form-field textarea,.tv-textarea{width:100%;min-width:0;height:var(--h-lg);padding:0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control); background:var(--bg-sunken);color:var(--text);font-size:14px;transition:border-color .15s,box-shadow .15s,background-color .15s;} .tv-textarea,.form-field textarea{height:auto;min-height:92px;padding:10px 12px;resize:vertical;line-height:1.5;} .form-field input:hover,.form-field textarea:hover{border-color:var(--line-3);} .form-field input:focus,.form-field select:focus,.form-field textarea:focus,.tv-textarea:focus{outline:none;border-color:var(--accent-line);box-shadow:var(--focus);} :is(.tv-settings-section,.auth-form-panel,.tv-modal,.confirm-modal,.delete-modal) :is(.tv-input,.form-field input,.form-field textarea,.auth-field input:not([type="checkbox"])){background:var(--bg-page);} .form-field input[aria-invalid="true"]{border-color:rgba(248,113,113,.55);} .form-field{display:flex;flex-direction:column;gap:6px;margin:0;} .form-field label{font-size:13px;font-weight:500;color:var(--text);} .form-error{margin:0;color:var(--err);font-size:13px;} /* Field: an input with its icon and action inside one box. The action sits in the field on desktop and stacks under it on phones (see 7). */ .tv-field{display:flex;align-items:center;gap:6px;min-width:0;height:52px;padding:0 6px 0 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-sunken); transition:border-color .15s,box-shadow .15s;} .tv-field:hover{border-color:var(--line-3);} .tv-field:focus-within{border-color:var(--accent-line);box-shadow:var(--focus);} .tv-field.is-loading{border-color:var(--accent-line);} .tv-field>.app-icon,.tv-field-icon{display:grid;place-items:center;flex:none;color:var(--text-3);} .tv-field>.app-icon,.tv-field-icon .app-icon{width:17px;height:17px;} .tv-field input{flex:1 1 auto;min-width:0;height:100%;padding:0 4px;border:0;outline:none;background:transparent;color:var(--text);font-size:15px;} .tv-field input:focus-visible{outline:none;} .tv-field .btn-primary,.tv-field .tv-btn{height:40px;min-height:40px;flex:none;padding:0 16px;} .ap-hint{min-height:17px;margin:8px 2px 0;color:var(--text-3);font-size:12.5px;line-height:17px;} .ap-hint:empty{display:none;} .ap-hint.is-error{color:var(--err);} .ap-hint.is-ready{color:var(--text-2);} .tv-spinner{display:inline-block;width:16px;height:16px;flex:none;border-radius:999px;border:2px solid var(--line-2);border-top-color:var(--accent);animation:tvSpin .8s linear infinite;} /* Search: a small quiet field for filtering lists. */ .lib-search{position:relative;display:flex;align-items:center;width:min(260px,100%);} .lib-search .app-icon{position:absolute;top:50%;transform:translateY(-50%);left:14px;width:16px;height:16px;color:var(--text-3);pointer-events:none;} .lib-search input{width:100%;min-width:0;height:44px;padding:0 14px 0 40px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-card);color:var(--text);font-size:14px; transition:border-color .15s,box-shadow .15s;} .lib-search input:hover{border-color:var(--border-hover);} .lib-search input:focus{outline:none;border-color:var(--accent-line);box-shadow:var(--focus);} /* Select styled as a compact dropdown button ("Newest ▾"). */ .tv-select{position:relative;display:inline-flex;align-items:center;} .tv-select select{appearance:none;-webkit-appearance:none;height:44px;padding:0 34px 0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-card);color:var(--text-2); font-size:14px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s;} .tv-select::after{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;margin-top:-5px;pointer-events:none;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);} .tv-select select:hover{border-color:var(--border-hover);color:var(--text);} .tv-select select:focus-visible{outline:none;border-color:var(--accent-line);box-shadow:var(--focus);} /* Menu: dropdowns, the profile menu and item context menus. */ .tv-menu,.lib-kebab-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:200px;padding:5px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--shadow-pop); display:flex;flex-direction:column;gap:1px;animation:tvRise .12s ease;} .tv-menu a,.tv-menu button,.lib-kebab-menu button,.lib-kebab-menu a{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:var(--r-xs);background:none;color:var(--text); font-size:13px;font-weight:450;text-align:left;text-decoration:none;cursor:pointer;} .tv-menu a:hover,.tv-menu button:hover,.lib-kebab-menu button:hover,.lib-kebab-menu a:hover{background:var(--hover);} .tv-menu .app-icon,.lib-kebab-menu .app-icon{width:15px;height:15px;color:var(--text-2);} .tv-menu hr,.lib-kebab-menu hr{margin:4px 2px;border:0;border-top:1px solid var(--line);} .tv-menu .is-destructive,.lib-kebab-menu .is-destructive{color:var(--err);} details:not([open])>.lib-kebab-menu,details:not([open])>.tv-menu{display:none;} .tv-menu .is-destructive .app-icon{color:var(--err);} .lib-kebab{position:relative;} .lib-kebab>summary{list-style:none;cursor:pointer;} .lib-kebab>summary::-webkit-details-marker{display:none;} .lib-kebab>summary{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);color:var(--text-2);} .lib-kebab>summary:hover,.lib-kebab[open]>summary{color:var(--text);background:var(--hover);} /* Badge: small, inline, a word or a dot. */ .tv-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);color:var(--text-2); font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;} .tv-badge .app-icon{width:12px;height:12px;} .tv-badge--accent,.tv-badge.tv-badge--accent{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);} .tv-badge--success,.tv-badge.tv-badge--success{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.08);color:var(--ok);} .tv-badge--warning,.tv-badge.tv-badge--warning{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.08);color:var(--warn);} .tv-badge--danger,.tv-badge.tv-badge--danger{border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.08);color:var(--err);} .tv-badge-dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none;} /* Avatar. */ .tv-avatar,.ap-avatar{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:none;overflow:hidden;border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:15px;font-weight:600;} .tv-avatar img,.ap-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tv-avatar--sm{width:28px;height:28px;font-size:12px;} .tv-avatar--lg{width:64px;height:64px;font-size:22px;} /* Icon tile: a small square that frames a stroke icon. */ .tv-icon-tile{--tile:32px;display:inline-grid;place-items:center;flex:none;width:var(--tile);height:var(--tile);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);} .tv-icon-tile .app-icon{width:16px;height:16px;} .tv-icon-tile--sm{--tile:26px;border-radius:7px;} .tv-icon-tile--sm .app-icon{width:14px;height:14px;} .tv-icon-tile--lg{--tile:44px;border-radius:var(--r-md);} .tv-icon-tile--lg .app-icon{width:20px;height:20px;} .tv-icon-tile--accent{color:var(--accent);} .tv-icon-tile--success{color:var(--ok);} .tv-icon-tile--warning{color:var(--warn);} .tv-icon-tile--danger{color:var(--err);border-color:rgba(248,113,113,.28);} .tv-icon-tile--muted{color:var(--text-3);} /* Post-auth result of the action the visitor started before signing up (TikVaultMonitor.completeIntentFromUrl): one panel at the top of the page. */ .tv-intent-panel{position:relative;display:flex;align-items:flex-start;gap:14px;margin:0 0 20px;padding:16px 44px 16px 16px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);min-width:0;} .tv-intent-panel--success{border-color:rgba(52,211,153,.28);} .tv-intent-panel--error{border-color:rgba(248,113,113,.28);} .tv-intent-panel-body{display:flex;flex-direction:column;gap:4px;min-width:0;} .tv-intent-panel-body h2{margin:0;font-size:16px;line-height:22px;font-weight:650;overflow-wrap:anywhere;} .tv-intent-panel-body p{margin:0;color:var(--text-2);font-size:13.5px;line-height:20px;} .tv-intent-panel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .tv-intent-panel-dismiss{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-md);background:none;color:var(--text-3);cursor:pointer;} .tv-intent-panel-dismiss:hover{background:var(--bg-hover);color:var(--text);} .tv-intent-panel-dismiss .app-icon{width:16px;height:16px;} /* First-monitor activation (TikVaultMonitor.activation): the creator, the first Story check, then the real result. A found Story's preview leads; with none, the completed check does. */ .tv-activation{position:relative;display:flex;flex-direction:column;gap:14px;margin:0 0 20px;padding:16px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);min-width:0;animation:tvRise .18s ease;} .tv-activation[data-activation-state="found"],.tv-activation[data-activation-state="none"]{border-color:rgba(52,211,153,.28);} .tv-activation-head{display:flex;align-items:center;gap:12px;min-width:0;padding-right:36px;} .tv-activation-who{min-width:0;} .tv-activation-who h2{margin:0;font-size:16px;line-height:22px;font-weight:650;overflow-wrap:anywhere;} .tv-activation-who p{margin:0;color:var(--text-2);font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tv-activation-steps{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;} .tv-activation-steps[hidden]{display:none;} .tv-activation-step{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:13.5px;line-height:20px;} .tv-activation-mark{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:999px;border:2px solid var(--line-2);} .tv-activation-step.is-done{color:var(--text);} .tv-activation-step.is-done .tv-activation-mark{border-color:var(--ok);background:var(--ok);} .tv-activation-step.is-done .tv-activation-mark::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid var(--bg-card);border-width:0 2px 2px 0;transform:rotate(45deg);} .tv-activation-step.is-active .tv-activation-mark{border-top-color:var(--accent);animation:tvSpin .8s linear infinite;} .tv-activation-step.is-warning .tv-activation-mark{border-color:var(--warn);} .tv-activation-step.is-warning .tv-activation-mark::after{content:"!";color:var(--warn);font-size:11px;font-weight:700;line-height:1;} .tv-activation-result{display:flex;align-items:center;gap:16px;min-width:0;} .tv-activation-result[hidden]{display:none;} .tv-activation[data-activation-state="none"] .tv-activation-result{align-items:center;} .tv-activation-media{display:grid;grid-template-columns:repeat(3,minmax(0,96px));gap:8px;flex:none;} .tv-activation-media.is-single{grid-template-columns:minmax(0,168px);} .tv-activation-media.is-icon{display:block;} .tv-activation-tile{cursor:pointer;} div.tv-activation-tile{cursor:default;} .tv-activation-tile-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;color:var(--text-2);font-size:12px;line-height:16px;text-align:center;} .tv-activation-tile-label .app-icon{width:16px;height:16px;} .tv-activation-summary{display:flex;flex-direction:column;gap:4px;min-width:0;} .tv-activation-count{font-size:18px;line-height:24px;font-weight:650;} .tv-activation-status{margin:0;color:var(--text-2);font-size:13.5px;line-height:20px;} .tv-activation-status[hidden]{display:none;} .tv-activation-status.is-saved{color:var(--ok);} .tv-activation-note{margin:0;color:var(--text-2);font-size:13px;line-height:19px;} .tv-activation-note[hidden]{display:none;} .tv-activation-actions{display:flex;flex-wrap:wrap;gap:8px;} .tv-activation-actions:empty{display:none;} @media (max-width:560px){ .tv-activation-result{align-items:flex-start;} .tv-activation-result.is-multi{flex-direction:column;gap:12px;} .tv-activation-result.is-multi .tv-activation-media{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;} .tv-activation-media.is-single{grid-template-columns:minmax(0,120px);} .tv-activation-count{font-size:16px;line-height:22px;} } @media (prefers-reduced-motion:reduce){ .tv-activation{animation:none;} .tv-activation-step.is-active .tv-activation-mark{animation:none;} } /* Progress. */ .tv-progress{position:relative;height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden;} .tv-progress>i{display:block;height:100%;border-radius:inherit;background:var(--accent);} .tv-progress.is-warning>i{background:var(--warn);} .tv-progress.is-full>i{background:var(--err);} /* Skeleton. */ .skeleton,.skeleton-line,.skeleton-value,.lib-skeleton-tile{background:var(--surface-2);border-radius:var(--r-xs);animation:tvPulse 1.6s ease-in-out infinite;} .skeleton-line{display:block;height:10px;} .skeleton-line-title{width:140px;} .skeleton-line-copy{width:min(240px,80%);margin-top:6px;} .skeleton-value{display:inline-block;width:60px;height:22px;} /* Notice: one compact line for a state the reader should act on. */ .tv-notice{display:flex;align-items:center;gap:12px;margin:0;padding:12px 16px;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-card);} .tv-notice-text{flex:1 1 auto;min-width:0;color:var(--text-2);font-size:13px;line-height:19px;} .tv-notice-text strong{color:var(--text);font-weight:600;} .tv-notice-actions{display:flex;align-items:center;gap:14px;flex:none;} .tv-notice--warning{border-color:rgba(251,191,36,.25);} .tv-notice--warning>.tv-icon-tile{color:var(--warn);} /* Toast. */ .app-toast-stack{position:fixed;left:50%;bottom:20px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,calc(100% - 32px));transform:translateX(-50%);pointer-events:none;} .app-toast{max-width:100%;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-3);color:var(--text);font-size:13px;line-height:19px;box-shadow:var(--shadow-pop);pointer-events:auto;animation:tvRise .15s ease;} .app-toast.success{border-color:rgba(52,211,153,.35);} .app-toast.error{border-color:rgba(248,113,113,.4);} /* Modal and bottom sheet share one backdrop and one panel. */ .confirm-modal-backdrop,.delete-modal-backdrop,.plan-modal-backdrop,.story-watch-backdrop,.story-lookup-viewer{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--scrim); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:tvRise .12s ease;} .confirm-modal,.delete-modal,.plan-modal{position:relative;width:min(440px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid var(--border-field);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-pop);} .confirm-modal h2,.delete-modal h2,.plan-modal h2{font-size:17px;line-height:24px;margin:0 0 6px;} .confirm-modal p,.delete-modal>p:not(.eyebrow){margin:0 0 18px;color:var(--text-2);font-size:13.5px;line-height:20px;white-space:pre-line;} .confirm-modal.danger{border-color:rgba(248,113,113,.3);} .confirm-modal-actions,.delete-modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;} .plan-modal-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font-size:0;} .plan-modal-close:hover{background:var(--hover);color:var(--text);} .plan-modal-close .app-icon{width:16px;height:16px;} .delete-modal .eyebrow{margin:0 0 6px;color:var(--err);font-size:12px;font-weight:500;} .delete-account-form{display:flex;flex-direction:column;gap:14px;} @media (max-width:560px){ .confirm-modal-backdrop,.delete-modal-backdrop,.plan-modal-backdrop{align-items:flex-end;padding:0;} .confirm-modal,.delete-modal,.plan-modal{width:100%;max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0;border-width:1px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));} .confirm-modal-actions,.delete-modal-actions{flex-direction:column-reverse;} .confirm-modal-actions>*,.delete-modal-actions>*{width:100%;height:var(--h-lg);} } /* Toggle switch. */ .toggle-switch{position:relative;display:inline-block;width:34px;height:20px;flex:none;} .toggle-switch input{position:absolute;opacity:0;width:0;height:0;} .toggle-switch .track{position:absolute;inset:0;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);cursor:pointer;transition:background-color .15s;} .toggle-switch .track::before{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:999px;background:var(--text-2);transition:transform .15s,background-color .15s;} .toggle-switch input:checked+.track{background:var(--accent);border-color:transparent;} .toggle-switch input:checked+.track::before{transform:translateX(14px);background:var(--on-light);} .toggle-switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px;} .toggle-switch input:disabled+.track{opacity:.4;cursor:not-allowed;} /* 5 ─ Product components ───────────────────────────────────────────────── */ /* Hero, measured from permaloop.io's home: the headline and composer sit in the middle of the first screen, the headline is one bold display line with a single highlighted phrase, and the composer is the heaviest object on the page. Nothing else competes above the fold. */ .tv-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:min(820px,calc(100dvh - 40px));padding:48px 0 56px;text-align:center;} .tv-hero h1{max-width:760px;font-size:var(--font-size-display);font-weight:700;line-height:1.08;letter-spacing:-.035em;text-wrap:balance;} .tv-hero h1 .tv-hl{display:block;color:var(--accent);} .tv-hero>p{max-width:520px;margin:12px 0 0;color:var(--text-2);font-size:15px;line-height:22px;} /* Guides keep the hero's composer but not its full first screen: the article below is the point of the page, so it starts right under the tool. */ /* Once the downloader shows a result the hero's landing job is done: it stops filling and centring the first screen, so the result follows the field and the page continues under it. Clearing the result restores the landing layout. Compact heroes (guides) are already collapsed. */ .tv-hero:not(.tv-hero--compact):has([data-downloader="results"]:not([hidden]) .tv-dl-result){min-height:0;justify-content:flex-start;padding-bottom:24px;} .tv-hero:not(.tv-hero--compact):has([data-downloader="results"]:not([hidden]) .tv-dl-result)+.tv-section{margin-top:0;} /* Composer: Permaloop's main box. A 680px panel on --bg-surface-2 with a 22px radius and a hairline border; the input sits at the top with no box of its own, and a bottom bar carries the mode icon on the left and the actions on the right, ending in a 40px pill. The mode switch and a one-line note sit underneath, outside the box. */ /* Mode switch: compact outlined pills under the composer, as on Permaloop; the selected mode lifts to --bg-selected. */ /* The note under the switch: one quiet centred line. */ /* Shortcuts under the composer, like Permaloop's three tiles: icon on top, a bold label below, on --bg-surface-1. */ .tv-results{width:100%;max-width:var(--composer-w);margin:var(--space-5) auto 0;text-align:left;} .tv-results:empty{display:none;} /* Result states under the widget. */ .state-card{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);} .state-card strong{display:block;font-size:14px;font-weight:600;} .state-card .hint{margin:2px 0 0;color:var(--text-2);font-size:13px;} .state-card .hint.error,.hint.error{color:var(--err);} .retry-btn{margin-left:auto;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);font-size:13px;font-weight:600;} /* Creator card: the result of a creator search. Same surface as the widget. */ .tv-creator-card{display:flex;align-items:center;gap:14px;padding:16px;} .tv-creator-card-copy{flex:1 1 auto;min-width:0;} .tv-creator-card-copy h3{font-size:15px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tv-creator-card-copy p{color:var(--text-2);font-size:13px;overflow-wrap:anywhere;} .tv-creator-card-bridge{margin-top:4px;max-width:60ch;line-height:19px;} .tv-creator-card-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap;} /* A button label with a creator's handle ("Monitor @name — Free") stays on one line: the handle is shortened with an ellipsis instead. */ .tv-btn:has(>.tv-btn-label){max-width:100%;min-width:0;} .tv-btn-label{display:inline-flex;min-width:0;white-space:pre;} .tv-btn-handle{min-width:0;overflow:hidden;text-overflow:ellipsis;} /* Universal input (assets/universal-input.js): one shared composer on public and signed-in Home. Text sits above a quiet action row inside one surface; feedback attaches directly below without a second status line between. */ .tv-hero:has(.tv-universal){min-height:0;padding:72px 0 40px;} .tv-universal{display:flex;flex-direction:column;gap:8px;width:100%;max-width:var(--composer-w);margin:28px auto 0;text-align:left;} .tv-universal-label{margin:0 2px;color:var(--text);font-size:13.5px;font-weight:600;line-height:18px;} .tv-universal-row{display:block;min-width:0;} .tv-universal-field{display:flex;flex-wrap:wrap;align-content:space-between;gap:0 8px;width:100%;height:auto;min-height:148px;padding:20px 16px 16px 20px;border-color:var(--border-panel);border-radius:22px;background:var(--bg-surface-2);cursor:text;} .tv-universal-field:hover{border-color:var(--border-strong);} .tv-universal-field:focus-within{border-color:var(--accent-line);box-shadow:var(--focus);} .tv-universal-field>input{order:-1;flex:1 1 100%;width:100%;height:32px;padding:0;font-size:18px;line-height:32px;text-overflow:ellipsis;} .tv-universal-field>input::placeholder{color:var(--text-secondary);opacity:1;} .tv-universal-field>.tv-field-icon{order:0;width:36px;height:40px;margin:0;color:var(--text-2);} .tv-universal-paste{display:inline-flex;align-items:center;gap:6px;flex:none;height:40px;margin-left:auto;padding:0 14px;border:0;border-radius:var(--radius-pill);background:none;color:var(--text-2);font-size:13px;font-weight:500;} .tv-universal-paste[data-icon]:not([data-icon-hydrated="true"])::before{content:"";display:inline-block;width:15px;height:15px;flex:none;} .tv-universal-paste .app-icon{width:15px;height:15px;} .tv-universal-paste:hover{background:var(--hover);color:var(--text);} .tv-universal-field>.tv-universal-submit{flex:none;height:40px;min-height:40px;padding:0 22px;border-color:transparent;border-radius:var(--radius-pill);background:var(--bg-selected);color:var(--text-2);font-size:14px;font-weight:600;} .tv-universal-submit[data-icon]:not([data-icon-hydrated="true"])::after{content:"";display:inline-block;width:16px;height:16px;flex:none;} .tv-universal-submit .app-icon{width:16px;height:16px;} .tv-universal.is-ready:not(.is-loading) .tv-universal-submit{background:var(--text-primary);color:var(--on-light);} .tv-universal.is-ready:not(.is-loading) .tv-universal-submit:hover{background:var(--primary-hover);} .tv-universal.is-loading .tv-universal-submit{opacity:1;background:var(--bg-selected);color:var(--text-2);cursor:wait;} .tv-universal-benefits{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;width:100%;max-width:var(--composer-w);margin:14px auto 0;padding:0;list-style:none;} .tv-universal-benefits[hidden]{display:none;} .tv-universal-benefits li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 14px;border:1px solid var(--border-card);border-radius:var(--radius-pill);background:var(--bg-surface-2);color:var(--text-secondary);font-size:12px;font-weight:500;line-height:16px;white-space:nowrap;} .tv-universal-benefits .app-icon{width:15px;height:15px;color:var(--text-primary);} .tv-universal-results{width:100%;max-width:var(--composer-w);margin:0 auto;text-align:left;} .tv-universal-results>:not(:empty){margin-top:var(--space-4);} .tv-universal-results.is-connected>:not(:empty){margin-top:8px;} .tv-universal-results .tv-results,.tv-universal-results .tv-dl-results{margin:0;} .tv-universal-loading{animation:tvRise .15s ease;} /* Result card (TikVaultUI.resultCard): the same frame for a creator, a video, a photo post, a Story, a LIVE link or an error -- a type badge, the preview beside who it is from, actions, then one follow-up. */ .tv-result{display:flex;flex-direction:column;gap:14px;min-width:0;padding:16px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);text-align:left;animation:tvRise .15s ease;} .tv-result-badge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin:0;padding:2px 10px 2px 8px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;line-height:20px;} .tv-result-badge .app-icon{width:13px;height:13px;} .tv-result-main{display:flex;align-items:flex-start;gap:16px;min-width:0;} .tv-result-media{flex:none;} .tv-result-body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;} .tv-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0;} .tv-result-heading{min-width:0;} .tv-result-title{margin:0;font-size:18px;line-height:24px;font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere;} .tv-result-subtitle,.tv-result-meta{margin:0;color:var(--text-2);font-size:13px;line-height:18px;overflow-wrap:anywhere;} .tv-result-status{margin:4px 0 0;color:var(--text-2);font-size:13px;line-height:18px;overflow-wrap:anywhere;} .tv-result-status.error{color:var(--err);} .tv-result-status a,.tv-result-note a{color:var(--accent);font-weight:600;text-decoration:none;} .tv-result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;} .tv-result-actions:empty{display:none;} .tv-result-actions .tv-btn,.tv-result-actions .tv-dl-vault>button{height:40px;min-height:40px;padding:0 18px;border-radius:var(--radius-pill);} .tv-result-next{padding-top:12px;border-top:1px solid var(--line);} .tv-result-next:empty,.tv-result-next[hidden]{display:none;} .tv-result-next>.dl-monitor,.tv-result-next>.dl-upsell{padding-top:0;border-top:0;} .tv-result-note{margin:0;color:var(--text-2);font-size:13px;line-height:18px;overflow-wrap:anywhere;} .tv-result[data-kind="error"]{gap:4px;border-color:rgba(248,113,113,.28);} .tv-result[data-kind="error"] .tv-result-title{font-size:15px;line-height:20px;} .tv-result[data-kind="error"] .tv-result-actions{margin-top:8px;} .tv-result-stories[hidden]{display:none;} .tv-result-stories .lib-section-head{margin:2px 0 10px;} .tv-result-stories .lib-section-head h3{font-size:14px;line-height:20px;font-weight:600;} /* Creator header: compact identity, one line of facts, a row of actions. */ .tv-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;} .tv-back:hover{color:var(--text);} .tv-back .app-icon{width:15px;height:15px;} /* Media card and grid. The thumbnail is the card; two quiet caption lines sit under it; actions appear on hover (always on touch). */ .story-library-grid,.vault-grid,.lib-skeleton-grid,.story-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-media-min),1fr));gap:22px 14px;} .story-library-card,.vault-card,.lib-card,.story-result-tile{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;} .lib-tile,.story-library-media-button,.story-result-media{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;overflow:hidden;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-card);color:inherit;cursor:pointer;transition:border-color .15s;} .lib-tile:hover,.story-library-media-button:hover{border-color:var(--line-3);} .lib-tile:disabled{cursor:not-allowed;} .lib-tile img,.lib-tile video,.story-library-preview,.vault-card .lib-tile img,.story-result-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .lib-tile .story-tile-state{position:absolute;inset:0;display:block;} .story-media-placeholder,.vault-card-placeholder,.story-result-noimage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--surface);color:var(--text-3);font-size:11.5px;text-align:center;} .lib-scrim{position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;background:linear-gradient(to top,rgba(6,6,8,.8),rgba(6,6,8,0));} .lib-duration{position:absolute;right:8px;bottom:7px;display:inline-flex;align-items:center;gap:4px;color:rgba(255,255,255,.92);font-size:11px;font-weight:500;} .lib-duration .app-icon{width:11px;height:11px;} .lib-parts{position:absolute;left:8px;bottom:7px;color:rgba(255,255,255,.85);font-size:11px;font-weight:500;} .media-play-icon{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:999px;background:rgba(8,8,11,.5);border:1px solid rgba(255,255,255,.2);color:#fff;opacity:0;transition:opacity .15s;} .media-play-icon .app-icon{width:15px;height:15px;} .lib-tile:hover .media-play-icon,.lib-tile:focus-visible .media-play-icon{opacity:1;} .lib-mark{position:absolute;top:8px;left:8px;display:grid;place-items:center;} .vault-card:has(.vault-select:not([hidden])) .lib-mark{display:none;} .lib-mark-saved,.lib-mark-fav{width:22px;height:22px;border-radius:999px;background:rgba(8,8,11,.6);} .lib-mark-saved{color:var(--ok);} .lib-mark-fav{color:#fff;} .lib-mark .app-icon{width:12px;height:12px;} .lib-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;background:rgba(8,8,11,.74);color:var(--text-2);font-size:11.5px;line-height:16px;text-align:center;} .lib-veil a{color:var(--accent);font-weight:600;text-decoration:none;} .lib-meta,.story-library-body,.vault-card-info{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0 2px;} .lib-meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:20px;} .lib-meta-row strong,.lib-meta-row .vault-creator-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--text);} .lib-meta-row span,.lib-meta-row time{font-size:12.5px;color:var(--text-2);white-space:nowrap;} .lib-meta-row+.lib-meta-row span{color:var(--text-3);} /* Card actions float over the top-right of the tile, so the caption rows under it get their full width. They show on hover and focus, always on touch. */ .lib-actions{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s;} .lib-actions>.lib-ib,.lib-actions>.lib-kebab>summary{width:32px;height:32px;border:0;border-radius:999px;background:rgba(10,10,12,.62);color:#f5f5f7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);} .lib-actions>.lib-ib:hover,.lib-actions>.lib-kebab>summary:hover,.lib-actions>.lib-kebab[open]>summary{background:rgba(24,24,28,.9);color:#fff;} .lib-actions>.lib-ib.is-saved{color:var(--ok);} .lib-actions>.lib-ib[aria-pressed="true"]{color:var(--accent);} .lib-card:hover .lib-actions,.lib-card:focus-within .lib-actions,.vault-card:hover .lib-actions,.vault-card:focus-within .lib-actions,.story-library-card:hover .lib-actions,.story-library-card:focus-within .lib-actions{opacity:1;} @media (hover:none){.lib-actions{opacity:1;}.media-play-icon{opacity:1;}} /* Stories and the Vault: one card shape where everything sits on the media itself, so the tile can be the whole card. Part count and marks top left, actions top right, who bottom left and when bottom right, over the scrim. The caption layer lets clicks through to the tile; only the Vault's creator link takes them. */ .story-library-card,.vault-card{gap:0;} .story-library-card>.lib-meta,.vault-card>.lib-meta{position:absolute;left:0;right:0;bottom:0;z-index:1;align-items:flex-start;gap:6px;padding:0 12px 11px;pointer-events:none;} .story-library-card>.lib-meta>.lib-meta-row,.vault-card>.lib-meta>.lib-meta-row{align-self:stretch;} .story-library-card .lib-meta-row :is(strong,.vault-creator-link),.vault-card .lib-meta-row :is(strong,.vault-creator-link){color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);} .story-library-card .lib-meta-row :is(time,span),.vault-card .lib-meta-row :is(time,span){color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.5);} .vault-card .vault-creator-link{pointer-events:auto;} .vault-card .vault-creator-link:hover{text-decoration:underline;} .story-library-card .lib-scrim,.vault-card .lib-scrim{height:38%;background:linear-gradient(to top,rgba(6,6,8,.82),rgba(6,6,8,.35) 45%,rgba(6,6,8,0));} .lib-corner{position:absolute;top:8px;left:8px;z-index:1;display:flex;align-items:center;gap:6px;} .lib-corner:empty{display:none;} .lib-corner .lib-mark{position:static;} .lib-corner .lib-parts{position:static;padding:3px 8px;border-radius:var(--radius-pill);background:rgba(8,8,11,.6);color:#fff;font-size:11px;line-height:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);} .vault-card:has(.vault-select:not([hidden])) .lib-corner{display:none;} .lib-status{padding:3px 9px;border-radius:var(--radius-pill);background:rgba(8,8,11,.72);color:#fff;font-size:11.5px;line-height:16px;} .lib-status:empty{display:none;} /* Browse pages show at most six across, so a wide screen gets bigger media rather than more of it. */ @media (min-width:768px){ .tv-page--browse :is(.story-library-grid,.vault-grid,.lib-skeleton-grid){grid-template-columns:repeat(auto-fill,minmax(max(var(--grid-media-min),calc((100% - 5 * var(--space-4)) / 6)),1fr));gap:var(--space-4);} } /* Creator rail. */ .lib-rail{display:flex;align-items:flex-start;gap:16px;margin:-4px -4px 20px;padding:6px 4px;overflow-x:auto;scrollbar-width:none;} .lib-rail::-webkit-scrollbar{display:none;} .lib-rail-item{display:flex;flex-direction:column;align-items:center;gap:7px;width:62px;flex:none;padding:0;border:0;background:none;color:inherit;text-decoration:none;} .lib-avatar{position:relative;width:50px;height:50px;flex:none;} .lib-avatar img,.lib-avatar .lib-avatar-fallback,.lib-avatar .creator-avatar-fallback{display:grid;place-items:center;width:50px;height:50px;border-radius:999px;object-fit:cover;background:var(--surface-3);color:var(--text-2);font-size:16px;font-weight:600;} .lib-avatar.has-new::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--accent);} .lib-rail-name{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:11.5px;} .lib-rail-item:hover .lib-rail-name{color:var(--text);} .lib-rail-item.is-paused .lib-avatar img,.lib-rail-item.is-paused .lib-avatar-fallback{opacity:.5;} .lib-rail-add .lib-avatar-fallback{border:1px dashed var(--line-3);background:transparent;color:var(--text-3);} .lib-rail-add:hover .lib-avatar-fallback{border-color:var(--accent-line);color:var(--accent);} /* Filter bar: segmented control on the left, search and menus on the right. Advanced options live behind "More filters". */ .lib-filters{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 18px;} .lib-filters-end{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} /* Sections inside a page. */ .lib-section{margin:0 0 32px;} .lib-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;} .lib-section-head h2{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.015em;} .lib-section-count{color:var(--text-2);font-size:13px;} .lib-section-foot{margin:16px 0 0;} .lib-link-button{padding:0;border:0;background:none;font:inherit;} /* Empty, loading and error states: centred, small, one action. */ .tv-empty,.lib-state,.ap-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:258px;padding:48px 24px;text-align:center;border:1px solid var(--border-field);border-radius:var(--radius-card);background:var(--bg-card);} .tv-empty h2,.tv-empty h3,.lib-state h2,.ap-state h3{font-size:16px;line-height:24px;font-weight:700;} .tv-empty p,.lib-state p,.ap-state p{max-width:46ch;color:var(--text-2);font-size:14px;line-height:24px;} /* Permaloop's empty card carries one plain stroke icon, not a framed tile. */ .lib-state-mark.tv-icon-tile,.lib-state-icon{--tile:auto;width:auto;height:auto;margin:0 0 10px;border:0;border-radius:0;background:none;color:var(--text-2);} .lib-state-mark.tv-icon-tile .app-icon,.app-icon.lib-state-icon{width:30px;height:30px;} .lib-state-actions,.tv-empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px;} /* The library panel (TikVaultUI.libraryState): the empty or restricted state of Stories and the Vault, in the space the media grid takes, so the page keeps its shape. A mark in a tile, then heading, line, optional highlights or a short list, the actions and a quiet footnote. Its height comes from its content, never a fixed empty box. */ .lib-state--panel{gap:0;min-height:0;padding:44px 28px 40px;border-color:var(--border-card);background:var(--bg-surface-1);} .lib-state--panel>.lib-state-mark.tv-icon-tile{--tile:48px;width:var(--tile);height:var(--tile);margin:0 0 16px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-surface-2);color:var(--text-2);} .lib-state--panel>.lib-state-mark.tv-icon-tile .app-icon{width:22px;height:22px;} .lib-state--panel>h2{margin:0;font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.01em;} .lib-state--panel>.lib-state-copy{max-width:52ch;margin:6px 0 0;font-size:14px;line-height:22px;} .lib-state--panel>.lib-state-actions{margin-top:20px;align-items:center;gap:10px 16px;} .lib-state--panel>.lib-state-actions:empty{display:none;} .lib-state-highlights{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;max-width:900px;margin:18px 0 0;padding:0;list-style:none;} .lib-state-highlights li{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:13.5px;line-height:20px;} .lib-state-highlights .app-icon{flex:none;width:16px;height:16px;color:var(--text-3);} .lib-state-body{width:100%;max-width:880px;margin:22px 0 0;text-align:left;} .lib-state--panel>.lib-state-foot{max-width:60ch;margin:16px 0 0;color:var(--text-3);font-size:12.5px;line-height:18px;} .lib-state--panel>.lib-state-foot a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px;} .lib-state-link{color:var(--text-2);font-size:13.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;} .lib-state-link:hover{color:var(--text);} /* Premium: the sidebar's muted gold on the mark only, never a loud card. */ .lib-state--premium>.lib-state-mark.tv-icon-tile,.tv-icon-tile--premium{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold);} .lib-state--premium .lib-state-highlights .app-icon{color:var(--gold);} @media (max-width:599px){ .lib-state--panel{padding:32px 18px 28px;} .lib-state--panel>h2{font-size:17px;line-height:24px;} .lib-state-highlights{flex-direction:column;align-items:flex-start;gap:10px;} .lib-state--panel>.lib-state-actions{flex-direction:column;align-items:stretch;width:100%;} .lib-state--panel>.lib-state-actions .tv-btn{width:100%;height:44px;} .lib-state--panel>.lib-state-actions .lib-state-link{align-self:center;padding:8px;} } .tv-error-state{border-color:rgba(248,113,113,.3);} /* Creator view: Stories | Posts. Posts (creator-posts.js) is a grid of the library's own cards, on the creator page and under a creator search result. */ .creator-tabs{margin:0 0 18px;} .creator-posts-section{display:flex;flex-direction:column;gap:12px;} .creator-posts-section>.lib-section-head{margin:0;} /* Creator explorer (both Homes): the creator card, then Stories | Posts | Highlights as real tabs. On the signed-in Home the card spans its full width (--wide). The card's text keeps a readable measure; its actions use the right-hand side. */ .tv-creator-result--wide .tv-result-heading{display:flex;flex-direction:column;align-items:flex-start;gap:2px;} .tv-creator-result--wide .tv-result-monitoring{margin-top:6px;} .tv-creator-result--wide .tv-result-actions .tv-quiet-link{padding:0 4px;} .tv-creator-result--wide :is(.tv-result-note,.tv-result-status){max-width:72ch;} @media (min-width:768px){ .tv-creator-result--wide .tv-result-main{align-items:center;} .tv-creator-result--wide .tv-result-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-5);} .tv-creator-result--wide .tv-result-body>*{grid-column:1;} .tv-creator-result--wide .tv-result-body>.tv-result-actions{grid-column:2;grid-row:1 / span 3;justify-content:flex-end;margin-top:0;} } .tv-creator-explorer{display:flex;flex-direction:column;gap:14px;min-width:0;} .tv-creator-explorer>.lib-tabs{align-self:flex-start;} .tv-creator-explorer .lib-tab .lib-count{font-variant-numeric:tabular-nums;} .tv-creator-explorer .lib-tab .lib-count[hidden]{display:none;} .tv-tab-panel[hidden]{display:none;} .tv-tab-panel:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-md);} /* The tab already names the panel; its section heading stays for screen readers, the count line stays visible. */ .tv-creator-explorer .tv-tab-panel .lib-section-head h2{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;} .tv-creator-explorer .tv-tab-panel .lib-section-head{justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;} .tv-creator-explorer .tv-tab-panel .lib-section-head .tv-quiet-link{margin-left:auto;} .tv-creator-explorer .tv-result-stories .lib-section-head h3{font-size:14px;line-height:20px;font-weight:600;} .tv-creator-explorer .creator-posts-section{gap:0;} /* Empty and error states in the explorer are one compact row: a small mark, what happened, and at most one action on the right. */ .tv-creator-explorer .lib-state{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:14px;row-gap:2px;min-height:0;padding:18px 20px;text-align:left;border-radius:var(--radius-md);} .tv-creator-explorer .lib-state>.lib-state-mark{grid-column:1;grid-row:1 / span 2;margin:0;} .tv-creator-explorer .lib-state>.lib-state-mark .app-icon{width:20px;height:20px;} .tv-creator-explorer .lib-state>h2{grid-column:2;grid-row:1;font-size:14px;line-height:20px;font-weight:600;} .tv-creator-explorer .lib-state>p{grid-column:2;grid-row:2;max-width:72ch;font-size:13px;line-height:20px;} .tv-creator-explorer .lib-state>.lib-state-actions{grid-column:3;grid-row:1 / span 2;justify-content:flex-end;margin:0;} .tv-creator-explorer .lib-state>.lib-state-actions:empty{display:none;} .tv-creator-explorer .lib-state .tv-btn{height:36px;} @media (max-width:639px){ .tv-creator-explorer>.lib-tabs{align-self:stretch;} .tv-creator-explorer>.lib-tabs>.lib-tab{flex:1 1 0;padding:0 10px;} .tv-creator-explorer .lib-state{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;padding:16px;} .tv-creator-explorer .lib-state>.lib-state-actions{grid-column:2;grid-row:3;justify-content:flex-start;margin-top:10px;} } /* Storage usage: a figure, a thin bar and one note, no box. */ /* Pricing card, measured from permaloop.io's plans page: #232325 cards with a hairline and 20px corners, the plan name, a 44px price, one 44px pill action, then label/value rows under a hairline. The recommended plan is the one place the accent shows: its border, badge, button and figures. */ .tv-pricing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} .tv-plan,.plan-comparison-tier{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(20px,2vw,28px);border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);} .tv-plan.is-featured,.plan-comparison-tier.featured{border-color:var(--accent-line);background:var(--bg-card);} .tv-plan-top,.plan-tier-top{order:0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;} .tv-plan h3,.plan-tier-top h3{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.015em;} .tv-plan-price,.plan-tier-price{order:1;display:flex;align-items:baseline;gap:4px;margin:26px 0 0;white-space:nowrap;} .tv-plan-price strong,.plan-tier-price strong{font-size:clamp(34px,3.1vw,44px);line-height:48px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;} .tv-plan-price span,.plan-tier-price span{color:var(--text-2);font-size:14px;} .tv-plan-tagline,.plan-tier-tagline{order:2;margin:6px 0 0;color:var(--text-2);font-size:14px;line-height:20px;} .tv-plan-list,.plan-benefits,.plan-features{order:4;list-style:none;display:flex;flex-direction:column;gap:0;margin:32px 0 0;padding:18px 0 0;border-top:1px solid var(--border-panel);} .tv-plan-list li,.plan-benefits li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;color:var(--text);font-size:14px;line-height:20px;} .tv-plan-list li strong{color:var(--text);font-weight:600;} .tv-plan-list .app-icon{width:15px;height:15px;margin-top:2px;flex:none;color:var(--text-2);} .tv-plan.is-featured .tv-plan-list .app-icon,.plan-comparison-tier.featured .plan-benefit-check{color:var(--accent);} /* Label/value rows (the signed-in plan picker). */ .plan-feature{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;line-height:20px;} .plan-feature-label{color:var(--text);} .plan-feature-value{color:var(--text);font-weight:600;text-align:right;white-space:nowrap;} .plan-comparison-tier.featured .plan-feature-value{color:var(--accent);} /* "Everything in Starter, plus": Pro and Plus inherit the plan below them and list only what improves. The line takes over the list's hairline. */ .tv-plan-includes,.plan-tier-includes{order:4;margin:32px 0 0;padding:18px 0 0;border-top:1px solid var(--border-panel);color:var(--text-2);font-size:14px;font-weight:600;line-height:20px;} .tv-plan-includes+.tv-plan-list,.plan-tier-includes+.plan-benefits,.plan-tier-includes+.plan-features{margin-top:4px;padding-top:0;border-top:0;} /* One pill action straight under the price. Recommended: the accent. The rest: light. Current or free: a quiet disabled pill. */ .tv-plan>.tv-btn,.plan-comparison-tier .plan-checkout-button{order:3;width:100%;height:44px;min-height:44px;margin:28px 0 0;border:0;border-radius:var(--radius-pill); background:var(--text);color:var(--on-light);font-size:14px;font-weight:600;} .tv-plan>.tv-btn:hover,.plan-comparison-tier .plan-checkout-button:hover{background:var(--primary-hover);} .tv-plan.is-featured>.tv-btn,.plan-comparison-tier.featured .plan-checkout-button{background:var(--accent);color:var(--on-light);} .tv-plan.is-featured>.tv-btn:hover,.plan-comparison-tier.featured .plan-checkout-button:hover{background:var(--accent-2);} .plan-comparison-tier .plan-checkout-button:disabled{opacity:1;background:var(--bg-selected);border:0;color:var(--text-2);cursor:default;} .plan-checkout-note{order:3;margin:10px 0 0;color:var(--text-3);font-size:12px;} .plan-tier-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--accent-line);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;} .plan-tier-badge .app-icon{display:none;} .tv-pricing-foot{margin:16px 0 0;color:var(--text-3);font-size:13px;} /* Compact feature blocks: icon, one bold line, one quiet line. */ /* Steps: the "how monitoring works" row, three columns on hairlines. */ /* Example state on the logged-out homepage. */ .tv-example{display:flex;flex-direction:column;gap:14px;} .tv-example-row{display:flex;align-items:center;gap:10px;} .tv-example-row strong{font-size:14px;} .tv-example-row span{color:var(--text-3);font-size:12.5px;} .tv-example-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;} .tv-example-grid figure{position:relative;margin:0;aspect-ratio:9/16;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);} .tv-example-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tv-example-grid figcaption{position:absolute;left:8px;right:8px;bottom:7px;display:flex;justify-content:space-between;color:rgba(255,255,255,.9);font-size:11px;font-weight:500;} .tv-example-grid figure::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(to top,rgba(6,6,8,.75),transparent);} .tv-example-grid figcaption{z-index:1;} .tv-example-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-3);font-size:11px;} /* Story Saver landing: lede, four-up features, comparison table, closing CTA. */ .tv-section-lede{max-width:720px;margin:-6px 0 18px;color:var(--text-2);font-size:14px;line-height:22px;} .tv-example-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));} .compare-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);} .story-compare-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px;line-height:19px;} .story-compare-table th,.story-compare-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);} .story-compare-table tr:last-child td{border-bottom:0;} .story-compare-table thead th{color:var(--text-3);font-size:12px;font-weight:500;background:var(--surface);} .story-compare-table td{color:var(--text-2);} .story-compare-table td:first-child{color:var(--text);font-weight:500;} .story-compare-table td:last-child,.story-compare-table thead th:last-child{color:var(--text);} /* Choice cards and four-step rows, built on the feature and steps pieces. */ /* Public tool pages (Story Viewer, Story/Photo/Slideshow Downloader): the shared "Related tools" row and the guide's visible update date. Each card is one plain link, so crawlers and screen readers get a descriptive anchor. */ .tv-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;} .tv-related a{display:flex;flex-direction:column;gap:3px;height:100%;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;transition:border-color .15s;} .tv-related a:hover{border-color:var(--line-3);} .tv-related a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .tv-related strong{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13.5px;font-weight:600;} .tv-related span{color:var(--text-2);font-size:13px;line-height:19px;} .tv-guide-updated{color:var(--text-3);font-size:12.5px;} /* Legal and contact pages: a narrow reading column on hairlines. */ .breadcrumb{margin:0 0 18px;color:var(--text-3);font-size:12.5px;} .breadcrumb a{color:var(--text-2);text-decoration:none;} .breadcrumb a:hover{color:var(--text);} .content-page-title{font-size:26px;line-height:32px;letter-spacing:-.01em;} .content-page-updated{margin:6px 0 0;color:var(--text-3);font-size:12.5px;} .content-page-intro{max-width:620px;margin:8px 0 0;color:var(--text-2);font-size:14px;line-height:22px;} .content-page-intro a,.prose a{color:var(--accent);text-decoration:none;} .content-page-intro a:hover,.prose a:hover{text-decoration:underline;} .prose{margin-top:24px;border-top:1px solid var(--line);color:var(--text-2);font-size:14px;line-height:23px;} .prose>section{padding:20px 0;border-bottom:1px solid var(--line);} .prose>section:last-child{border-bottom:0;} .prose .block+.block{margin-top:12px;} .prose .block+.block:has(>h2){margin-top:26px;} .prose h2{margin:0 0 6px;color:var(--text);font-size:15px;line-height:22px;} .prose p{margin:0;} .prose p+p{margin-top:10px;} .prose ul,.prose ol{margin:8px 0 0;padding-left:20px;} .prose li+li{margin-top:4px;} .prose b,.prose strong{color:var(--text);font-weight:600;} .contact-card{display:flex;align-items:center;gap:16px;margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);} .contact-card .field-label{color:var(--text-3);font-size:11.5px;letter-spacing:.04em;} .contact-card a{color:var(--text);font-size:15px;font-weight:600;text-decoration:none;} .contact-card a:hover{color:var(--accent);} .content-page-form #takedownForm{gap:14px;max-width:560px;margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);} .content-page-form #takedownForm>div{display:flex;flex-direction:column;gap:6px;} .content-page-form .form-submit{width:auto;align-self:flex-start;} .form-success{max-width:560px;margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);} .form-success h2{font-size:15px;} .form-success p{margin:4px 0 0;color:var(--text-2);font-size:13.5px;line-height:20px;} /* Settings section: a title on a hairline, then label/value rows. No card. */ /* Settings: each section is one Permaloop card, the title at its top and label/value rows on hairlines inside it. */ .tv-settings{display:flex;flex-direction:column;gap:20px;} .tv-settings-section{padding:6px 24px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);} .tv-settings-section>h2{padding:16px 0 12px;border-bottom:1px solid var(--border-card);font-size:16px;line-height:22px;font-weight:700;} .tv-settings-section .tv-row{border-bottom-color:var(--border-card);} .tv-settings>.premium-page{padding:0;border:0;background:none;} .tv-settings-section>p.tv-settings-note{margin:8px 0 0;color:var(--text-3);font-size:12.5px;} .tv-row{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:16px 0;border-bottom:1px solid var(--line);} .tv-row:last-child{border-bottom:0;} .tv-row-label{min-width:0;} .tv-row-label strong,.tv-row-label h3{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere;} .tv-row-label p,.tv-row-label span{display:block;margin:3px 0 0;color:var(--text-2);font-size:13.5px;line-height:20px;overflow-wrap:anywhere;} .tv-row>.tv-btn,.tv-row>button,.tv-row>a.tv-btn{flex:none;} .tv-row-id{display:flex;align-items:center;gap:12px;min-width:0;} .tv-row-hint{color:var(--text-3)!important;font-size:12px!important;} .tv-row--form{align-items:flex-start;} .tv-row--form>.tv-row-label{flex:1 1 280px;max-width:360px;} .tv-row-fields{display:flex;flex-direction:column;gap:12px;flex:1 1 300px;max-width:380px;} .tv-row-fields .tv-btn{align-self:flex-start;} .tv-settings-section[hidden],.tv-settings-view[hidden],.premium-page[hidden]{display:none;} /* A section is a stack of these cards; Privacy & Security ends with the delete card, set apart by its border. */ .tv-settings-view{display:flex;flex-direction:column;gap:20px;} .tv-settings-section--danger{border-color:rgba(248,113,113,.28);} /* Integrations: one row per connected app -- its logo, name, live status and detail, with the actions the status allows on the right. The dot is a second signal only; the status always says it in words. */ .tv-integration-logo{display:block;width:32px;height:32px;flex:none;} .tv-row-label .tv-integration-status{display:flex;align-items:center;gap:7px;} .tv-integration-status::before{content:"";width:7px;height:7px;flex:none;border-radius:999px;background:var(--text-3);} .tv-integration[data-tone="on"] .tv-integration-status::before{background:var(--ok);} .tv-integration[data-tone="attention"] .tv-integration-status::before{background:var(--warn);} .tv-integration[data-tone="upgrade"] .tv-integration-status::before{background:var(--accent);} .tv-integration>.tv-row-actions:empty{display:none;} /* A switch stays beside its label, even on phones where rows wrap. */ .tv-row:has(>.tv-switch){flex-wrap:nowrap;} /* Settings area: a small section nav on the left, one section on the right. Product places live in the side panel; this nav only holds account pages. The frame is sized for Plan & billing, which needs the room for four plans side by side; every other section keeps its own narrower column, so the nav stays put when switching sections. */ .tv-page--settings{max-width:1480px;} .tv-settings-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start;} .tv-settings-nav{position:sticky;top:24px;display:flex;flex-direction:column;gap:2px;} .tv-settings-nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:10px;color:var(--text-2);font-size:13.5px;font-weight:500;white-space:nowrap;text-decoration:none;} .tv-settings-nav a svg{width:16px;height:16px;flex:none;} .tv-settings-nav a:hover{background:var(--hover);color:var(--text);} .tv-settings-nav a[aria-current="page"]{background:var(--bg-selected);color:var(--text);} .tv-settings-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} .tv-settings{max-width:760px;min-width:0;} .tv-settings:has(>.premium-page:not([hidden])){max-width:none;} /* Plan cards share the column with the section nav, so the column count follows the width the picker actually has, not the viewport: one, two, or all four in a row. Never three, which would strand a plan on its own row. */ .premium-plan-picker{container:plan-picker/inline-size;} .tv-settings .plan-comparison-grid{grid-template-columns:minmax(0,1fr);} @container plan-picker (min-width:540px){.tv-settings .plan-comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @container plan-picker (min-width:1040px){.tv-settings .plan-comparison-grid{grid-template-columns:repeat(4,minmax(0,1fr));}} /* Tighter plan cards than the marketing ones: same parts, less air between. */ .tv-settings .plan-comparison-tier{padding:20px;} .tv-settings .plan-tier-price{margin-top:14px;} .tv-settings .plan-tier-tagline{margin-top:4px;min-height:0;} .tv-settings .plan-comparison-tier .plan-checkout-button{margin-top:18px;} .tv-settings .plan-features{margin-top:18px;padding-top:8px;} .tv-settings .plan-feature{padding:6px 0;} /* Four across at the narrow end, a tagline can take two lines; reserve them so the buttons still line up. Wider than that, every tagline fits on one. */ @container plan-picker (min-width:1040px) and (max-width:1199px){.tv-settings .plan-tier-tagline{min-height:40px;}} .tv-row-actions{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end;} /* A switch drawn from a native checkbox, so it keeps its keyboard and screen reader behaviour. Disabled ones mark features not built yet. */ .tv-switch{position:relative;display:inline-flex;flex:none;width:38px;height:22px;} .tv-switch input{appearance:none;-webkit-appearance:none;margin:0;width:38px;height:22px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-selected);cursor:pointer;transition:background .15s;} .tv-switch input::after{content:"";position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:999px;background:var(--text-3);transition:transform .15s,background .15s;} .tv-switch input:checked{background:var(--accent);border-color:var(--accent);} .tv-switch input:checked::after{transform:translateX(16px);background:var(--on-light);} .tv-switch input:disabled{cursor:not-allowed;opacity:.5;} .tv-switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} @media (max-width:1023px){ .tv-settings-layout{grid-template-columns:minmax(0,1fr);gap:16px;} /* Phones and tablets: the four sections sit side by side above the content, every one visible without scrolling. */ .tv-settings-nav{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;} .tv-settings-nav a{justify-content:center;height:auto;min-height:44px;padding:6px 10px;border:1px solid var(--border-card);border-radius:12px;font-size:13px;line-height:17px;white-space:normal;text-align:center;} .tv-settings-nav a[aria-current="page"]{border-color:var(--border-hover);} .tv-settings{max-width:none;} } @media (max-width:560px){ /* Two by two on phones; a long label wraps inside its own button. */ .tv-settings-nav{grid-template-columns:repeat(2,minmax(0,1fr));} .tv-settings-nav a{justify-content:flex-start;text-align:left;} .tv-row-actions{width:100%;justify-content:stretch;} .tv-row-actions>.tv-btn{flex:1 1 0;} } .premium-page{display:flex;flex-direction:column;gap:32px;} .premium-overview{padding:18px;} /* Prose: legal and support pages, and longer explanations. */ /* Login, signup and password recovery: one centred panel on the page. */ .auth-main{display:flex;justify-content:center;padding:40px var(--gutter) 56px;} .auth-shell{width:min(416px,100%);} .auth-form-panel{display:flex;flex-direction:column;padding:32px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);} .auth-heading{margin:0 0 24px;} .auth-heading h1,.auth-form-panel h1{font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere;} .auth-kicker{margin:0 0 6px;color:var(--text-3);font-size:12px;font-weight:500;} .auth-intro{margin:4px 0 0;color:var(--text-2);font-size:13.5px;line-height:20px;} .auth-form{display:flex;flex-direction:column;gap:16px;} .auth-field{display:flex;flex-direction:column;gap:6px;} .auth-field>label,.auth-label-row label{color:var(--text);font-size:13px;font-weight:500;} .auth-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;} .auth-label-row a{color:var(--text-2);font-size:12.5px;text-decoration:none;} .auth-label-row a:hover{color:var(--text);} .auth-field input:not([type="checkbox"]){width:100%;height:var(--h-lg);padding:0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-sunken);color:var(--text);font-size:14px;transition:border-color .15s,box-shadow .15s;} .auth-field input::placeholder{color:var(--text-3);} .auth-field input:hover{border-color:var(--line-3);} .auth-field input:focus{outline:none;border-color:var(--accent-line);box-shadow:var(--focus);} .auth-field input[aria-invalid="true"]{border-color:rgba(248,113,113,.6);} .password-field{position:relative;} .password-field input{padding-right:62px!important;} .password-toggle{position:absolute;right:6px;top:50%;height:28px;padding:0 8px;transform:translateY(-50%);border:0;border-radius:var(--r-xs);background:none;color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;} .password-toggle:hover{color:var(--text);background:var(--hover);} .password-requirement{margin:2px 0 0;color:var(--text-3);font-size:12px;line-height:17px;} .password-requirement .req-check{display:inline-grid;place-items:center;width:14px;height:14px;flex:none;border:1px solid var(--line-3);border-radius:999px;font-size:9px;} .password-requirement.met{color:var(--ok);} .password-requirement.invalid{color:var(--err);} .password-requirement.invalid .req-check{border-color:var(--err);color:var(--err);} .field-error{margin:0;color:var(--err);font-size:12px;line-height:17px;} .auth-legal a{color:var(--text);text-underline-offset:2px;} .form-submit,.auth-submit{display:inline-flex;align-items:center;justify-content:center;width:100%;height:var(--h-lg);margin-top:4px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--text);color:var(--on-light);font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s;} .form-submit:hover:not(:disabled){opacity:.9;} .form-submit:disabled{opacity:.55;cursor:not-allowed;} .auth-google-button{display:flex;align-items:center;justify-content:center;gap:10px;height:var(--h-lg);margin:0;border:1px solid var(--border-field);border-radius:var(--radius-pill);background:var(--bg-selected);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s,background-color .15s;} .auth-google-button:hover{border-color:var(--line-3);background:var(--surface-3);} .auth-google-icon{width:18px;height:18px;flex:none;} .auth-google-button[aria-disabled="true"]{opacity:.65;cursor:progress;} .auth-submit[aria-busy="true"]{cursor:progress;} .auth-status a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;} .auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 0;color:var(--text-3);font-size:12px;} .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);} .auth-status{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2);font-size:12.5px;line-height:18px;} .auth-form-panel>.auth-status:not([hidden]){margin-bottom:20px;} .auth-status-error{border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.07);color:#fca5a5;} .auth-status-success{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.07);color:#a7f3d0;} .auth-icon{width:16px;height:16px;flex:none;margin-top:1px;} .auth-icon-back{transform:rotate(180deg);} .auth-assurance{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);color:var(--text-3);} .auth-assurance p{margin:0;} .auth-assurance strong{display:block;color:var(--text);font-size:12.5px;} .auth-assurance span{display:block;margin-top:2px;color:var(--text-3);font-size:12px;} .auth-legal{margin:-4px 0 0;color:var(--text-3);font-size:11.5px;line-height:17px;text-align:center;} .auth-email-choices{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0;} .auth-email-note{margin:0;color:var(--text-3);font-size:11.5px;line-height:17px;} .auth-check{display:flex;align-items:flex-start;gap:8px;color:var(--text-2);font-size:12.5px;line-height:18px;cursor:pointer;} .auth-check input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:var(--accent);} .auth-switch{margin:20px 0 0;color:var(--text-2);font-size:13px;text-align:center;} .auth-switch a{color:var(--text);font-weight:600;text-decoration:none;} .auth-switch a:hover{color:var(--accent);} .auth-back-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;} .auth-back-link:hover{color:var(--text);} .auth-back-link .auth-icon{width:14px;height:14px;margin:0;} /* Contextual auth: at most one small chip under the heading naming the creator, plan or item the visitor is signing up for. */ .auth-heading:has(+ .auth-intent:not([hidden])){margin-bottom:12px;} .auth-intent{margin:0 0 22px;min-width:0;} .auth-intent-chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-width:0;padding:6px 14px 6px 6px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:var(--surface-2);} .auth-intent-chip:not(:has(.tv-avatar,.auth-intent-thumb)){padding-left:14px;} .auth-intent-chip .tv-avatar{width:28px;height:28px;font-size:12px;} .auth-intent-names{display:flex;align-items:baseline;gap:8px;min-width:0;} .auth-intent-names strong{color:var(--text);font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .auth-intent-names span{color:var(--text-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .auth-intent-thumb{position:relative;flex:none;width:28px;height:28px;overflow:hidden;border-radius:999px;background:var(--surface-3);} .auth-intent-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} /* Sign-up prompt ─ opened by an account action while signed out (TikVaultShell.authGate). Small, centred, two clear choices. */ .tv-gate-backdrop{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--scrim);} .tv-gate{position:relative;width:min(380px,100%);padding:24px;border:1px solid var(--border-field);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-pop);animation:tvRise .15s ease;} .tv-gate-close{position:absolute;top:12px;right:12px;} .tv-gate-mark{display:grid;place-items:center;width:40px;height:40px;margin:0 0 14px;border-radius:12px;background:var(--bg-selected);color:var(--text);} .tv-gate-mark .app-icon{width:20px;height:20px;} .tv-gate h2{margin:0 0 6px;padding-right:28px;font-size:17px;line-height:24px;font-weight:650;letter-spacing:-.01em;} .tv-gate p{margin:0 0 20px;color:var(--text-2);font-size:13.5px;line-height:20px;} .tv-gate-actions{display:flex;flex-direction:column;gap:8px;} .tv-gate-actions .tv-btn{width:100%;height:44px;min-height:44px;border-radius:var(--radius-pill);} /* 6 ─ Page bindings ────────────────────────────────────────────────────── */ /* Story lookup results (homepage creator mode and /tiktok-story-saver). */ .story-results{display:flex;flex-direction:column;gap:14px;} .story-result-tile>div{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:0 2px;} .story-result-tile>div>span:first-child{color:var(--text-3);font-size:11.5px;} .story-result-status{margin:0;font-size:12px;color:var(--text-2);} .story-lookup-viewer-inner{position:relative;display:flex;flex-direction:column;gap:10px;align-items:center;width:min(420px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:12px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);} .story-lookup-viewer-inner video,.story-lookup-viewer-inner img{display:block;width:100%;max-height:72dvh;object-fit:contain;border-radius:var(--r-md);background:#000;} .story-lookup-viewer-close{align-self:stretch;height:var(--h-md);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-3);color:var(--text);font-weight:600;} /* Public downloader result (homepage download mode and /downloader). */ /* Downloader ─ one component (assets/downloader.js) wherever it appears: the Download mode on Home and the /downloader page. Its field is the universal input's composer; a result is one card under it. */ [data-downloader="results"]{width:100%;} .tv-dl-results{width:100%;max-width:var(--composer-w);margin:16px auto 0;text-align:left;} .tv-dl-results:empty{display:none;} .tv-dl-thumb{position:relative;display:grid;place-items:center;align-self:start;width:136px;aspect-ratio:9/16;overflow:hidden;border-radius:var(--radius-md);background:#000;color:var(--text-3);} .tv-dl-thumb video,.tv-dl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tv-dl-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .tv-dl-actions .tv-btn,.tv-dl-vault>button{height:40px;min-height:40px;padding:0 18px;border-radius:var(--radius-pill);} .tv-dl-vault{display:contents;} .tv-dl-vault>button{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--bg-selected);color:var(--text);font-size:13.5px;font-weight:600;} .tv-dl-vault>button:hover:not(:disabled){background:var(--border-hover);} .tv-dl-vault>button:disabled{opacity:.6;cursor:default;} .tv-dl-vault>p{flex-basis:100%;margin:0;color:var(--text-2);font-size:13px;} .tv-dl-vault>p:empty{display:none;} .tv-dl-note{margin:0;color:var(--text-2);font-size:13px;line-height:18px;overflow-wrap:anywhere;} .tv-dl-note:empty{display:none;} .tv-dl-note.is-error{color:var(--err);} /* Photo posts: readable tiles over many per row. The card's own width picks two, three or four columns, so the grid reads the same on every page and beside the signed-in rail; a long post simply adds rows. */ .tv-dl-photos-wrap{container:dl-photos/inline-size;display:flex;flex-direction:column;gap:10px;} .tv-dl-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;} @container dl-photos (min-width:520px){.tv-dl-photos{grid-template-columns:repeat(3,minmax(0,1fr));}} @container dl-photos (min-width:760px){.tv-dl-photos{grid-template-columns:repeat(4,minmax(0,1fr));}} @container dl-photos (min-width:1000px){.tv-dl-photos{grid-template-columns:repeat(5,minmax(0,1fr));}} /* A post with four or more photos gets room for four readable tiles; videos, Stories and short photo posts keep the composer's width. */ .tv-dl-results:has(.tv-dl-photo:nth-child(4)), .tv-hero .tv-universal-results:has(.tv-dl-photo:nth-child(4)){max-width:var(--result-photos-w);} .tv-dl-photo{display:flex;flex-direction:column;gap:4px;min-width:0;} .tv-dl-photo-tile{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;overflow:hidden;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-page);cursor:pointer;} .tv-dl-photo-tile:hover{border-color:var(--line-3);} .tv-dl-photo-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tv-dl-photo-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--text-3);font-size:12px;} .tv-dl-photo.is-done .tv-dl-photo-foot span{color:var(--text-2);} .dl-upsell{padding:12px 0 0;border-top:1px solid var(--line);color:var(--text-2);font-size:13px;line-height:19px;} .dl-upsell p{margin:0;} .dl-upsell-actions{margin:6px 0 0 !important;} .dl-upsell a{color:var(--accent);font-weight:600;text-decoration:none;} .dl-monitor{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 0 0;border-top:1px solid var(--line);} .dl-monitor[hidden]{display:none;} .dl-monitor-title{margin:0;font-size:14px;line-height:20px;font-weight:650;overflow-wrap:anywhere;} .dl-monitor-copy{margin:0;color:var(--text-2);font-size:13px;line-height:18px;} .dl-monitor-actions{display:flex;margin-top:6px;min-width:0;} .dl-monitor-actions .tv-btn{max-width:100%;height:auto;min-height:var(--h-sm);padding-block:7px;white-space:normal;line-height:1.25;text-align:center;overflow-wrap:anywhere;} .dl-monitor-note{margin:2px 0 0;color:var(--text-2);font-size:13px;line-height:18px;overflow-wrap:anywhere;} .dl-monitor-note:empty{display:none;} .dl-monitor-note.is-error{color:var(--err);} .dl-monitor-note a{color:var(--accent);font-weight:600;text-decoration:none;} /* Signed-in home: notices above the widget, one line of account facts under it, then "Your Stories" grouped by creator, two creators a row. */ .tv-home-notices{display:flex;flex-direction:column;gap:8px;max-width:720px;margin:0 auto;} .tv-home-notices:not(:has(>:not([hidden]))){display:none;} .tv-live-note{display:inline-flex;align-items:center;gap:7px;margin-right:auto;color:var(--text-2);font-size:12.5px;} .tv-section-head .tv-live-note{color:var(--text-2);} .lib-dot{width:6px;height:6px;flex:none;border-radius:999px;background:var(--accent);} /* Creators page ─ the watchlist as one structured list. Add field and slot usage on one row, a toolbar (segmented filter on the left, search and sort on the right), then a single #232325 container: a compact column header and hairline-separated rows. Every row has the same columns: Creator, Status, Stories, Last Story, actions. The whole row opens the creator's Stories (the username link stretches over it); the menu and a status that explains itself sit above that layer. Phones keep the same rows and fold the figures into one meta line. */ .tv-stack--tight{gap:14px;} .ap-add{display:flex;flex-direction:column;margin:0 0 24px;} /* Add creator: Permaloop's Monitor field. A 66px box on #232325 with the action inside it on the right, grey until something is typed. */ .tv-field.tv-field--add{height:66px;padding:0 9px 0 22px;gap:10px;border-color:var(--border-field);border-radius:var(--radius-field);background:var(--bg-card);} .tv-field.tv-field--add:hover{border-color:var(--border-hover);} .tv-field.tv-field--add:focus-within{border-color:var(--accent-line);box-shadow:var(--focus);} .tv-field--add>.app-icon{color:var(--text-2);} .tv-field--add input{font-size:15px;} .tv-field--add input::placeholder{color:var(--text-2);} .tv-field.tv-field--add .tv-btn{height:48px;min-height:48px;padding:0 20px;border-radius:var(--radius-control);background:var(--bg-selected);color:var(--text-2);font-size:14px;} .tv-field.tv-field--add .tv-btn:hover{background:var(--border-hover);color:var(--text);} .tv-field--add:has(input:not(:placeholder-shown)) .tv-btn{background:var(--text);color:var(--on-light);} .ap-add-foot{display:flex;flex-direction:column;gap:14px;margin:10px 4px 0;} .ap-add-foot .ap-hint{margin:0;} /* Slots: "Creator slots 31 / 100", a thin bar, and what is left. */ /* Label left, count right: the first column takes the room, so a long note under them (spanning both) can never push the count toward the middle. */ .tv-stat.ap-capacity{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 16px;min-width:0;} .ap-capacity>.tv-stat-row{justify-self:end;} .ap-capacity .tv-stat-label{margin:0;color:var(--text-2);font-size:12.5px;} .ap-capacity .tv-stat-value{font-size:14px;} .ap-capacity .tv-stat-unit{color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums;} .ap-capacity>.tv-progress{grid-column:1/-1;width:100%;margin:0;} .ap-capacity>.tv-progress[hidden]{display:none;} .ap-capacity .tv-stat-note{grid-column:1/-1;margin:0;font-size:12.5px;} .ap-capacity.is-warning .tv-stat-note{color:var(--warn);} .ap-capacity>.tv-icon-tile{display:none;} /* What adding a creator does, before the first one (Tracking side column). */ .ap-next{display:flex;flex-direction:column;gap:8px;margin-top:4px;} .ap-next[hidden]{display:none;} .ap-next-title{margin:0;color:var(--text);font-size:13px;line-height:18px;font-weight:600;} .ap-next ol{display:flex;flex-direction:column;gap:6px;margin:0;padding:0 0 0 18px;color:var(--text-2);font-size:13px;line-height:19px;} .ap-next li::marker{color:var(--text-3);font-variant-numeric:tabular-nums;} .tv-stat-row{display:flex;align-items:baseline;gap:5px;white-space:nowrap;} .tv-stat-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;} .tv-stat-unit{color:var(--text-2);font-size:12.5px;} .tv-stat-note{color:var(--text-3);font-size:12px;} /* Tablets stack the slots under the field at a readable width. From desktop up the field and the slots share one row; the slots end on the same right edge as the toolbar and the list below. */ @media (min-width:768px) and (max-width:1023px){.ap-add-foot>.ap-capacity{max-width:360px;}} @media (min-width:1024px){ .ap-add{display:grid;grid-template-columns:minmax(0,760px) minmax(200px,280px);justify-content:space-between;align-items:center;column-gap:var(--space-6);} /* On the app width, like Search: the field fills the main column and capacity and what happens next sit in the side column, which ends on the list's right edge below. No gap opens between them. */ .tv-page--tracking .ap-add{grid-template-columns:minmax(0,1fr) 300px;justify-content:stretch;align-items:start;column-gap:40px;} .tv-page--tracking .ap-add-foot>.ap-next{grid-column:2;grid-row:2 / span 3;} .ap-add>form{grid-column:1;grid-row:1;} .ap-add-foot{display:contents;} .ap-add-foot>.ap-hint{grid-column:1;margin:10px 4px 0;} .ap-add-foot>.ap-capacity{grid-column:2;grid-row:1;} } .ap-section{display:flex;flex-direction:column;gap:14px;} .ap-section>.lib-filters{margin:0;} /* The list. */ .ap-rows{--ap-cols:minmax(0,1fr) 184px 120px 150px 68px;display:flex;flex-direction:column;min-width:0;} .ap-rows:has(>.ap-rows-head){border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);} .ap-rows-head,.ap-row{display:grid;grid-template-columns:var(--ap-cols);align-items:center;column-gap:20px;padding:0 12px 0 20px;} .ap-rows-head{height:44px;border-bottom:1px solid var(--border-card);color:var(--text-3);font-size:12px;font-weight:500;} .ap-row{min-height:68px;padding-block:12px;border-bottom:1px solid var(--border-card);transition:background-color .15s;} .ap-row:last-child{border-bottom:0;border-radius:0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);} .ap-row-id{display:flex;align-items:center;gap:12px;min-width:0;} .ap-row-id>div,.ap-row-id>span:last-child{min-width:0;} .ap-row-id .ap-avatar{width:40px;height:40px;} .ap-row-id h3{display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;font-weight:600;letter-spacing:0;} .ap-row-id .ap-row-nick{display:block;margin:1px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3);font-size:12.5px;line-height:18px;} .ap-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums;} .ap-cell-count .ap-cell-value{color:var(--text);font-weight:500;} .ap-cell-value.is-muted{color:var(--text-3);} .ap-cell-sub{display:block;margin-top:2px;color:var(--text-3);font-size:12px;font-weight:400;white-space:nowrap;} .ap-cell .skeleton-line{width:56px;height:8px;background:var(--surface-3);} .ap-cell-last .skeleton-line{width:88px;} /* Each figure carries its own label for screen readers; the header shows it. */ .ap-cell-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} .ap-row-meta{display:none;} /* Status: a 6px dot and a word. Monitoring is the quiet normal state; paused is amber text, not a pill; off is muted. */ .ap-status,.monitoring-status{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;color:var(--text-2);font-size:13px;white-space:nowrap;} .ap-status::before,.monitoring-status::before{content:"";width:6px;height:6px;flex:none;border-radius:999px;background:var(--ok);} .ap-status.is-warning,.monitoring-status.is-warning{color:var(--warn);} .ap-status.is-warning::before,.monitoring-status.is-warning::before{background:var(--warn);} .ap-status.is-off,.monitoring-status.is-off{color:var(--text-3);} .ap-status.is-off::before,.monitoring-status.is-off::before{background:var(--text-3);} /* Waiting for the first successful check: a hollow dot, not the green one. */ .ap-status.is-waiting,.monitoring-status.is-waiting{color:var(--text-2);} .ap-status.is-waiting::before,.monitoring-status.is-waiting::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-3);} /* The shared monitoring mark (TikVaultUI.monitoringStatus): the status, and the last verified check under it in quieter text. */ .tv-monitor-status{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;max-width:100%;} .tv-monitor-status-detail{max-width:100%;overflow:hidden;padding-left:14px;color:var(--text-3);font-size:12px;line-height:16px;text-overflow:ellipsis;white-space:nowrap;} .monitoring-status[title]{cursor:help;} .ap-row-acts{display:flex;align-items:center;justify-content:flex-end;gap:2px;} .ap-row-acts .lib-ib,.ap-row-acts .lib-kebab>summary{width:32px;height:32px;color:var(--text-3);} .creator-row:is(:hover,:focus-within) .ap-row-acts :is(.lib-ib,.lib-kebab>summary){color:var(--text-2);} .ap-row-acts .lib-kebab>summary:hover,.ap-row-acts .lib-kebab[open]>summary{color:var(--text);} .ap-row.is-dim .ap-avatar,.ap-row.is-dim .ap-row-id h3{opacity:.6;} .ap-row .lib-kebab-menu,.creator-actions .lib-kebab-menu{min-width:240px;} .creator-actions.is-up .lib-kebab-menu{top:auto;bottom:calc(100% + 6px);} /* A row opens the creator: the username link's hit area covers it all. */ .creator-row{position:relative;} .creator-row:hover{background:var(--bg-hover);} .creator-link{color:inherit;text-decoration:none;} .creator-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;} .creator-link:focus-visible{outline:none;} .creator-row:has(.creator-link:focus-visible){background:var(--bg-hover);box-shadow:inset 0 0 0 2px var(--accent-line);} .creator-row .lib-kebab,.creator-row .monitoring-status[title]{position:relative;z-index:2;} .ap-open-hint{pointer-events:none;transition:color .15s,transform .15s;} .creator-row:is(:hover,:has(.creator-link:focus-visible)) .ap-open-hint{color:var(--text);transform:translateX(2px);} .creator-actions[open]{z-index:21;} .creator-control{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:0 10px;color:var(--text);font-size:13px;} .creator-control-label{font-size:inherit;font-weight:400;letter-spacing:0;text-transform:none;color:inherit;} .creator-remove{color:var(--err)!important;} .creator-track-again{width:100%;} .ap-sheet-title{display:none;align-items:center;gap:12px;padding:4px 10px 12px;margin-bottom:4px;border-bottom:1px solid var(--line);} .ap-sheet-title strong{display:block;font-size:14px;} .ap-sheet-title>div span{display:block;font-size:12px;color:var(--text-3);} /* Loading: skeleton rows with the real row's geometry, so nothing jumps. */ .ap-row.app-loading-row .ap-avatar{border-radius:999px;background:var(--surface-3);} .ap-row.app-loading-row .skeleton{background:var(--surface-3);} .ap-row.app-loading-row .skeleton-line-title{width:120px;} .ap-row.app-loading-row .skeleton-line-copy{width:84px;margin-top:8px;} /* Search or a tab found nothing: one line and a way out, inside the list. */ .ap-rows-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 20px;text-align:center;color:var(--text-2);font-size:14px;} .ap-state-action{margin-top:12px;} /* Tracking's first-creator steps (the Home start panel's pattern). */ .ap-start{margin:0;} /* Stories before any capture: the start panel with one action, or the tracked creators with their monitoring status. */ .story-start,.vault-start{margin:0;} /* Creators tracked, nothing captured: inside the waiting panel, each creator and its monitoring status as plain rows between hairlines -- no cards inside the card. */ .story-waiting .lib-state-body{max-width:640px;} .story-waiting .tv-home-monitor{border:0;border-top:1px solid var(--border-card);border-radius:0;background:none;} .story-waiting .tv-home-monitor>li{border-bottom:1px solid var(--border-card);} .story-waiting .tv-home-monitor>li+li{border-top:0;} .story-waiting .tv-home-monitor-row{padding-left:4px;padding-right:4px;border-radius:0;} .story-waiting-status:empty{display:none;} .ap-start .tv-home-start-head h2{font-size:16px;line-height:22px;} @media (min-width:768px) and (max-width:1023px){ .ap-rows{--ap-cols:minmax(0,1fr) 164px 92px 128px 68px;} .ap-rows-head,.ap-row{column-gap:14px;padding-left:16px;} } @media (max-width:767px){ .ap-add-foot{gap:16px;} #creatorTabs .lib-tab{padding:0 12px;} .ap-rows:has(>.ap-rows-head){border-radius:var(--radius-md);} .ap-rows-head{display:none;} /* [avatar] @username [menu] Display name ● Monitoring 169 Stories · 22m ago */ .ap-row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"id id acts" ". status status" ". meta meta";align-items:start;column-gap:12px;row-gap:3px;padding:12px 14px;} .ap-row:first-of-type{border-radius:calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;} .ap-row:last-child{border-radius:0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px);} .ap-row:only-of-type{border-radius:calc(var(--radius-md) - 1px);} .ap-row-id{grid-area:id;align-items:flex-start;} .ap-row-id .ap-row-nick{font-size:13px;} .ap-cell-status{grid-area:status;} .ap-cell-status .ap-status{font-size:12.5px;} .ap-row>.ap-cell-count,.ap-row>.ap-cell-last{display:none;} .ap-row-meta{grid-area:meta;display:block;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3);font-size:12.5px;line-height:18px;font-variant-numeric:tabular-nums;} .ap-row-meta .skeleton-line{width:150px;height:8px;margin-top:5px;background:var(--surface-3);} .ap-row-meta:empty{display:none;} .ap-row-acts{grid-area:acts;margin:-8px -10px 0 0;} .ap-row-acts .ap-open-hint{display:none;} .ap-row-acts .lib-kebab>summary{width:40px;height:40px;} .ap-row.app-loading-row>.ap-cell-status{display:block;} .ap-rows .lib-kebab[open]::before{content:"";position:fixed;inset:0;z-index:60;background:var(--scrim);} .ap-rows .lib-kebab[open] .lib-kebab-menu{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:61;min-width:0;padding:10px 12px calc(16px + env(safe-area-inset-bottom));border-radius:var(--r-xl) var(--r-xl) 0 0;border-width:1px 0 0;} .ap-rows .lib-kebab[open] .lib-kebab-menu>:not(hr){min-height:46px;font-size:14px;} .ap-rows .lib-kebab-menu .ap-sheet-title{display:flex;} } /* Stories: creator overview cards and history. */ .creator-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--grid-card-min),100%),1fr));gap:16px;} .creator-library-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);transition:border-color .15s;} .creator-library-card:hover{border-color:var(--border-hover);} .creator-library-heading{display:flex;align-items:center;gap:12px;min-width:0;} .creator-library-avatar{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:999px;object-fit:cover;background:var(--surface-3);color:var(--text-2);font-weight:600;} .creator-library-identity{display:flex;flex-direction:column;min-width:0;} .creator-library-identity h2{font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .creator-library-identity strong{color:var(--text-2);font-size:12.5px;font-weight:500;} .creator-library-identity span{color:var(--text-3);font-size:12px;} .creator-library-previews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;} .creator-library-preview{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:var(--bg-page);} .creator-library-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .creator-library-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;} .creator-library-link:hover{color:var(--text);} .creator-library-link .app-icon{width:14px;height:14px;} .story-creator-empty{grid-column:1/-1;padding:24px 0;color:var(--text-3);font-size:12.5px;text-align:center;} .story-history-section{margin:0 0 28px;} .story-history-section>h2{margin:0 0 12px;font-size:15px;} .story-locked-section{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);} .story-history-note{margin:0 0 12px;color:var(--text-2);font-size:13px;} .story-history-cta{margin:0 0 14px;} .story-history-status{margin:12px 0 0;color:var(--text-3);font-size:12px;} .library-load-more{display:flex;margin:18px auto 0;} .story-locked-plan{color:var(--accent);font-weight:600;} .story-append-skeleton{height:40px;margin-top:12px;} .story-library-card-locked .lib-tile{cursor:default;} /* Story viewer. */ .story-watch-modal{position:relative;display:flex;flex-direction:column;width:min(460px,100%);max-height:calc(100dvh - 40px);overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface-2);box-shadow:var(--shadow-pop);} .story-watch-modal>.plan-modal-close{z-index:3;top:14px;right:12px;background:transparent;color:var(--text-2);} /* minmax(0,1fr): an implicit auto row grows to a portrait file's natural height, which on a phone pushes the media (and the video controls) under the Prev/Next bar instead of fitting it. */ .story-watch-media-wrap{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:320px;flex:1 1 auto;background:#000;overflow:hidden;} .story-watch-media-wrap img,.story-watch-media-wrap video{display:block;width:100%;max-height:68dvh;object-fit:contain;} .story-watch-status{padding:40px 20px;color:var(--text-2);font-size:13px;text-align:center;} /* The title and actions sit in a header above the media, clear of the close button. */ .story-viewer-actions>button{height:34px;min-height:34px;padding:0 12px;font-size:13px;} .story-viewer-actions{display:flex;gap:6px;flex:none;} .story-viewer-actions .btn-secondary,.story-viewer-download{height:34px;min-height:34px;padding:0 12px;font-size:13px;} .story-watch-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;color:var(--text-3);font-size:12px;} /* Vault. */ @media (min-width:768px){.lib-filters-end{flex:0 1 auto;flex-wrap:nowrap;}.lib-filters .lib-search{width:260px;}} .vault-creator-link{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;} .vault-creator-link:hover{color:var(--accent);} #vaultStatus{margin:0;overflow-wrap:anywhere;} #vaultStatus:not(:empty){margin:0 0 14px;color:var(--text-2);font-size:13px;} #vaultMore{display:flex;margin:22px auto 0;} .vault-select{position:absolute;top:8px;left:8px;z-index:2;display:flex;} .vault-select span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} .vault-card.is-selected .lib-tile{outline:2px solid var(--accent);outline-offset:2px;} .vault-selection-status{max-height:40vh;overflow:auto;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-3);color:var(--text-2);font-size:13px;box-shadow:var(--shadow-pop);} .vault-selection-status:empty{display:none;} .vault-bulk-list{margin:8px 0 0;padding-left:18px;} .vault-bulk-list a{color:var(--text);} .vault-bulk-line{margin:0 0 8px;color:var(--text);} .vault-selection-status .tv-btn{margin:0 8px 0 0;} .vault-bulk-fallback{margin-top:10px;} .vault-bulk-fallback summary{cursor:pointer;color:var(--text-2);} .vault-selection-status .tv-upgrade-prompt{margin:0;} /* The Vault viewer: the Stories viewer's frame (section 10) in a native . Media is sized by the viewport's height and keeps its own shape: --vault-ratio comes from the loaded image or video (9:16 until it knows). The close button, edges, part bars, avatar and key hint are the Stories viewer's own pieces. */ .vault-viewer{--vault-ratio:.5625;--vault-media-h:min(calc(100dvh - 156px),calc((100vw - 208px) / var(--vault-ratio))); position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:rgba(8,8,8,.95);color:var(--text);} .vault-viewer[open]{display:block;} .vault-viewer::backdrop{background:rgba(8,8,8,.6);} body:has(.vault-viewer[open]){overflow:hidden;} .vault-viewer-top{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:28px 32px 0;pointer-events:none;} .vault-viewer-top>*{pointer-events:auto;} .vault-viewer-identity{display:flex;align-items:center;gap:12px;min-width:0;} .vault-viewer-who{display:flex;flex-direction:column;min-width:0;} .vault-viewer-who h2{overflow:hidden;margin:0;color:var(--text);font-size:15px;line-height:20px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;} .vault-viewer-who p{overflow:hidden;margin:0;color:var(--text-2);font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;} .vault-viewer-who p:empty{display:none;} .vault-viewer-stage{display:flex;align-items:center;justify-content:center;gap:24px;height:100%;padding:24px 0;} .vault-viewer-edge[hidden]{display:none;} .vault-viewer-column{display:flex;flex-direction:column;gap:12px;width:max(calc(var(--vault-media-h) * var(--vault-ratio)),min(340px,calc(100vw - 32px)));max-width:calc(100vw - 208px);min-width:0;} .vault-viewer-frame{position:relative;align-self:center;width:min(100%,calc(var(--vault-media-h) * var(--vault-ratio)));aspect-ratio:var(--vault-ratio);overflow:hidden;border-radius:16px;background:#000;} .vault-viewer-media{position:absolute;inset:0;display:grid;place-items:center;} .vault-viewer-media img,.vault-viewer-media video{display:block;width:100%;height:100%;object-fit:contain;background:#000;} .vault-viewer-parts{position:absolute;top:12px;left:12px;right:12px;z-index:1;} #vaultViewerStatus{position:absolute;top:50%;left:50%;z-index:2;max-width:calc(100% - 32px);margin:0;padding:8px 12px;border-radius:12px;background:rgba(18,18,18,.82);color:var(--text-2);font-size:13.5px;line-height:20px;text-align:center;transform:translate(-50%,-50%);} #vaultViewerStatus:empty{display:none;} /* One slim bar: part navigation left, the item's actions right. */ .vault-viewer footer{display:flex;align-items:center;gap:8px;min-height:40px;} .vault-viewer-nav{display:flex;align-items:center;gap:2px;} .vault-viewer-part{min-width:44px;color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums;text-align:center;} .vault-viewer-actions{display:flex;align-items:center;gap:8px;margin-left:auto;} .vault-viewer-actions>.lib-ib{width:40px;height:40px;border-radius:999px;background:var(--bg-card);color:var(--text);} .vault-viewer-actions>.lib-ib:hover:not(:disabled){background:var(--bg-hover);} .vault-viewer-nav>.lib-ib{width:36px;height:36px;border-radius:999px;} .vault-viewer-favorite[aria-pressed="true"]{color:var(--accent);} .vault-viewer-favorite[aria-pressed="true"] .app-icon{fill:currentColor;} .vault-viewer-remove:hover:not(:disabled){color:var(--err);} .vault-viewer-download{height:40px;min-height:40px;padding:0 16px;font-size:13.5px;} .vault-viewer-download .app-icon{width:16px;height:16px;} #vaultActionStatus{margin:-4px 0 0;color:var(--text-2);font-size:13px;line-height:18px;} #vaultActionStatus:empty{display:none;} .vault-viewer :is(.story-watch-close,.story-watch-edge,.lib-ib,.tv-btn):focus-visible{outline:3px solid rgba(165,166,255,.9);outline-offset:3px;} /* Narrower screens put who and when above the media rather than beside it. */ @media (min-width:768px) and (max-width:1099px){ .vault-viewer{--vault-media-h:min(calc(100dvh - 220px),calc((100vw - 208px) / var(--vault-ratio)));} .vault-viewer-top{position:relative;padding:20px 24px 0;} .vault-viewer-stage{height:calc(100% - 64px);padding:16px 0 24px;} } /* Phones: who and when over the top, media filling the middle (still in its own shape), the actions in one bar along the bottom; swipe, no edges. */ @media (max-width:767px){ .vault-viewer{background:#080808;} .vault-viewer[open]{display:flex;flex-direction:column;} .vault-viewer-top{position:relative;flex:none;align-items:center;padding:12px 12px 8px 16px;} .vault-viewer .story-watch-close{width:40px;height:40px;} .vault-viewer-stage{flex:1 1 auto;min-height:0;height:auto;align-items:stretch;gap:0;padding:0;} /* Stories' edge buttons are styled later in the file, so these need the extra .vault-viewer to stay hidden. */ .vault-viewer .vault-viewer-edge,.vault-viewer .story-watch-keys{display:none;} /* The part bars over the media show where you are; the counter stays for screen readers so the bar fits beside Favourite, Remove and Save. */ .vault-viewer-part>[aria-hidden="true"]{display:none;} .vault-viewer-part{min-width:0;} .vault-viewer-column{position:relative;width:100%;max-width:none;gap:0;} .vault-viewer-frame{flex:1 1 auto;width:100%;min-height:0;aspect-ratio:auto;border-radius:0;} .vault-viewer footer{flex:none;padding:8px 12px calc(8px + env(safe-area-inset-bottom));} .vault-viewer-actions>.lib-ib{width:44px;height:44px;} .vault-viewer-download{height:44px;min-height:44px;} #vaultActionStatus{position:absolute;left:12px;right:12px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:2;margin:0;padding:8px 12px;border-radius:12px;background:rgba(18,18,18,.9);} } /* Account: subscription block and plan chooser as the account page and the pricing modal render them. */ .billing-current{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 24px;} .billing-current-copy{min-width:0;} .billing-current-copy .account-card-label{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-2);font-size:12.5px;font-weight:500;} .billing-current-copy h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:6px 0 0;font-size:20px;line-height:26px;} .billing-current-copy h3 span{color:var(--text-2);font-size:13.5px;font-weight:400;letter-spacing:0;} .billing-current-copy h3 span:empty{display:none;} .billing-current-status{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:6px 0 0;} .billing-current-status p{color:var(--text-2);font-size:13px;} .billing-current-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;} .billing-cancel-button{color:var(--err)!important;} .billing-plan-change{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0 0;border-top:1px solid var(--line);} .billing-plan-change strong{font-size:13px;} .billing-plan-change p{margin:3px 0 0;color:var(--text-2);font-size:13px;} #usageArea:empty{display:none;} #usageArea:not(:empty){margin-top:16px;padding-top:16px;border-top:1px solid var(--line);} .tv-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 24px;} .tv-stat{display:flex;flex-direction:column;gap:4px;min-width:0;} .tv-stat>.tv-icon-tile{display:none;} .tv-stat-label{color:var(--text-2);font-size:12px;} .tv-stat>.tv-progress{margin-top:4px;} .plan-comparison-grid,.plan-modal-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} /* The logged-out modal puts its badge before the name; lift it into the corner. */ .plan-comparison-tier>.plan-tier-badge{position:absolute;top:clamp(20px,2vw,28px);right:clamp(20px,2vw,28px);} @media (min-width:1024px){.plan-tier-tagline{min-height:40px;}} .plan-tier-current{color:var(--text-3);font-size:12px;} .ap-plan-foot{margin:14px 0 0;color:var(--text-3);font-size:12.5px;} .plan-modal{width:min(1180px,100%);padding:28px;background:var(--bg-page);} .plan-modal-heading{margin:0 0 18px;padding-right:32px;} .plan-modal-heading p{margin:4px 0 0;color:var(--text-2);font-size:13px;} .plan-modal-footer,.plan-modal-assurance{margin:14px 0 0;color:var(--text-3);font-size:12.5px;} .plan-modal-assurance{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;} .plan-modal-assurance span{display:inline-flex;align-items:center;gap:6px;} .plan-modal-assurance span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--text-3);margin-left:-8px;} .plan-modal-close:not(:has(.app-icon)){font-size:20px;line-height:1;} .plan-benefit-check{width:15px;flex:none;color:var(--text-3);} /* Analytics preference. */ .analytics-notice{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:14px;max-width:560px;margin-inline:auto;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--shadow-pop);} .analytics-notice-copy{flex:1;min-width:0;} .analytics-notice-copy strong{font-size:13.5px;} .analytics-notice-copy p{margin:2px 0 0;color:var(--text-2);font-size:12.5px;line-height:18px;} .analytics-notice-copy a{color:var(--accent);text-decoration:none;} .analytics-notice-actions{display:flex;flex-direction:column;gap:6px;flex:none;} .analytics-notice-actions button{height:32px;min-height:32px;font-size:12.5px;} /* 7 ─ Responsive ───────────────────────────────────────────────────────── */ @media (max-width:1023px){ .tv-pricing,.plan-comparison-grid,.plan-modal-tiers{grid-template-columns:repeat(2,minmax(0,1fr));} .tv-example-grid{grid-template-columns:repeat(4,minmax(0,1fr));} .tv-example-grid>:nth-child(n+5){display:none;} .tv-related{grid-template-columns:1fr;} .tv-example-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));} .tv-example-grid--5>:nth-child(n+5){display:block;} } @media (max-width:767px){ :root{--gutter:16px;--header-h:52px;} .tv-page{padding-top:20px;padding-bottom:40px;} .tv-page-head{align-items:flex-start;} .tv-page-head h1{font-size:26px;line-height:32px;} .tv-page-head p{font-size:13.5px;line-height:20px;} .tv-field.tv-field--add{height:58px;padding:0 6px 0 16px;border-radius:14px;} .tv-field.tv-field--add .tv-btn{height:44px;min-height:44px;padding:0 14px;} .tv-settings-section{padding:4px 16px;border-radius:var(--radius-md);} .tv-plan,.plan-comparison-tier,.tv-settings .plan-comparison-tier{padding:18px;} .tv-seg>button,.tv-seg>a,.lib-tab{padding:0 14px;} /* Phones keep the same composer, just narrower: the bar keeps the pill button on the right, and the headline drops to a phone display size. */ .tv-hero{min-height:0;justify-content:flex-start;padding:40px 0 32px;} /* The headline scales with the phone's width so its longest line spans most of the screen instead of sitting in a narrow centred column. */ .tv-hero h1{font-size:clamp(34px,11vw,50px);line-height:1.12;letter-spacing:-.03em;} .tv-hero>p{font-size:14px;line-height:20px;} .tv-field input,.form-field input,.lib-search input{font-size:16px;} .tv-section{padding:32px 0;} .compare-scroll{overflow:visible;border:0;border-radius:0;} .story-compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} .story-compare-table,.story-compare-table tbody,.story-compare-table tr,.story-compare-table td{display:block;} .story-compare-table tr{margin:0 0 8px;padding:4px 14px;border:1px solid var(--line);border-radius:var(--r-md);} .story-compare-table td{display:flex;justify-content:space-between;gap:16px;padding:9px 0;text-align:right;} .story-compare-table td:first-child{justify-content:flex-start;text-align:left;} .story-compare-table td:not(:first-child)::before{content:attr(data-label);flex:none;color:var(--text-3);font-weight:400;text-align:left;} .story-compare-table tr td:last-child{border-bottom:0;} .tv-pricing{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;gap:10px;scrollbar-width:none;} .tv-pricing>*{flex:0 0 78%;scroll-snap-align:center;} .plan-comparison-grid,.plan-modal-tiers{grid-template-columns:1fr;} .story-library-grid,.vault-grid,.lib-skeleton-grid,.story-results-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;} .tv-example-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} .tv-example-grid>:nth-child(n+4){display:none;} .lib-filters{gap:10px;} .lib-filters-end:has(.lib-search,.tv-search){width:100%;} .lib-filters{flex-wrap:nowrap;} .lib-filters:has(.lib-search,.tv-search){flex-wrap:wrap;} .lib-search{flex:1 1 160px;width:auto;} .tv-creator-card{flex-wrap:wrap;} .tv-creator-card-actions{width:100%;} /* Phones: the main action gets its own full-width row, the others share the row below, so no label has to wrap. */ .tv-creator-card-actions>*{flex:1 1 auto;min-width:0;} .tv-creator-card-actions>.tv-btn--primary{order:-1;flex-basis:100%;} .billing-current{grid-template-columns:1fr;} .billing-current-actions>*{flex:1 1 auto;} .tv-row{flex-wrap:wrap;} .tv-row>.tv-btn,.tv-row>button{width:100%;} .story-watch-backdrop{padding:0;} .story-watch-modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;} .story-watch-media-wrap img,.story-watch-media-wrap video{max-height:none;height:100%;} .analytics-notice{left:8px;right:8px;max-width:none;bottom:calc(8px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch;} .analytics-notice-actions{flex-direction:row;} .analytics-notice-actions button{flex:1;} .tv-notice{flex-wrap:wrap;} .tv-notice-actions{width:100%;padding-left:38px;} .tv-footer-top{flex-direction:column;align-items:flex-start;gap:0;} .auth-main{padding-top:24px;} .auth-form-panel{padding:22px;} /* iOS zooms into any focused field under 16px and stays zoomed. */ .auth-field input:not([type="checkbox"]){font-size:16px;} } @media (max-width:560px){ /* Three across on phones; a tile opens the viewer, which carries the actions, so the per-card actions step aside. */ .story-library-card .lib-actions{display:none;} .story-library-card>.lib-meta,.vault-card>.lib-meta{padding:0 8px 8px;} .vault-card .lib-actions{display:none;} /* The add action keeps its plus; its words would crowd the field. */ .tv-field.tv-field--add .tv-btn{width:44px;padding:0;gap:0;font-size:0;} .tv-field.tv-field--add .tv-btn .app-icon{width:18px;height:18px;} .lib-meta-row strong{font-size:12px;} .tv-dl-thumb{width:96px;} .tv-result{padding:14px;} .tv-result-main{gap:12px;} .tv-result-actions{width:100%;} .tv-result-actions>.tv-btn,.tv-result-actions>a.tv-btn,.tv-result-actions .tv-dl-vault>button{flex:1 1 100%;justify-content:center;height:44px;min-height:44px;} /* A creator's actions run under the 64px avatar too (avatar + 12px gap), so "Monitor @name — Free" has the card's full width for the handle. */ .tv-creator-result .tv-result-main:has(>.tv-result-media .tv-avatar--lg) .tv-result-body>.tv-result-actions{width:calc(100% + 76px);margin-left:-76px;} .tv-dl-result:not(.is-photos) .tv-result-main{flex-wrap:wrap;} .tv-dl-result:not(.is-photos) .tv-result-body{flex-basis:calc(100% - 108px);} .tv-universal-field{min-height:136px;padding:18px 12px 12px 16px;border-radius:18px;} .tv-universal-field>input{font-size:16px;} .tv-universal-field>.tv-field-icon{height:44px;} .tv-universal-paste{height:44px;min-height:44px;} .tv-universal-field>.tv-universal-submit{height:44px;min-height:44px;padding:0 16px;justify-content:center;} .tv-hero:has(.tv-universal){padding:40px 0 24px;} .dl-monitor-actions .tv-btn{flex:1 1 auto;min-height:40px;} .tv-gate-backdrop{align-items:flex-end;padding:0;} .tv-gate{width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;border-width:1px 0 0;padding:22px 18px calc(20px + env(safe-area-inset-bottom));} } @media (max-width:340px){ .story-library-grid,.vault-grid,.lib-skeleton-grid,.story-results-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .tv-pricing>*{flex-basis:86%;} } /* Phone touch targets: every tappable text link or header control is at least 44px tall, even where it looks like plain text. */ @media (max-width:767px){ .tv-brand{min-height:44px;} .tv-topbar-end>.tv-btn{height:44px;min-height:44px;} .tv-menu-btn{width:44px;height:44px;} .tv-footer-links a,.breadcrumb a,.auth-switch a,.auth-back-link{display:inline-flex;align-items:center;min-height:44px;} .tv-footer-links{gap:0 18px;} .tv-footer-links a+a::before{content:none;} .tv-footer-row{padding:8px var(--gutter) 16px;} .tv-footer-note{margin-top:4px;} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;} } /* Save to Vault as vault-save.js appends it to a public download result. */ .download-primary-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h-md);padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);font-size:13.5px;font-weight:600;align-self:flex-start;} .download-primary-button:hover:not(:disabled){background:var(--surface-3);} .download-primary-button:disabled{opacity:.6;cursor:default;} /* 8 ─ Legacy pages on the shared shell ───────────────────────────────────── The Admin Center still uses site.css for its own widgets. These rules drop its sidebar grid so the shared header and footer lay out normally. */ body.auth-app[data-shell]{display:block;min-height:100dvh;background:var(--bg);font-family:var(--font);} body.auth-app[data-shell]>.app-main{width:100%;max-width:var(--page-max);margin:0 auto;padding:28px var(--gutter) 72px;visibility:visible;} body.auth-app[data-shell] :is(h1,h2,h3,h4){font-family:var(--font);letter-spacing:-.01em;} /* Links inside running text. With a monochrome palette colour alone cannot mark a link, so these carry a quiet underline that brightens on hover. */ .tv-section-lede a,.content-page-intro a,.prose a,.analytics-notice-copy a,.lib-veil a,.dl-upsell a,.tv-dl-vault>p a{ text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;text-decoration-thickness:1px;} .tv-section-lede a:hover,.content-page-intro a:hover,.prose a:hover,.analytics-notice-copy a:hover,.lib-veil a:hover,.dl-upsell a:hover,.tv-dl-vault>p a:hover{text-decoration-color:currentColor;} /* 9 ─ Vault ───────────────────────────────────────────────────────────────── A media library first. Designed for the phone and widened from there: the title and one quiet storage line, then type tabs, search, sort and select, then the grid, which is what the page is for. */ .tv-page--vault{padding-top:28px;} .vault-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin:0 0 20px;} .vault-head h1{font-size:38px;line-height:44px;font-weight:700;letter-spacing:-.035em;} .vault-head-copy{min-width:0;} /* Inside a creator's part of the Vault the head is that creator, as on a Stories creator page: avatar, @handle, then what is saved. */ .vault-head-avatar{display:grid;place-items:center;flex:none;overflow:hidden;} .vault-head-avatar img{width:100%;height:100%;object-fit:cover;} .vault-head.is-creator{align-items:center;} .vault-head.is-creator h1{font-size:26px;line-height:32px;letter-spacing:-.02em;overflow-wrap:anywhere;} .vault-head-copy p{margin:4px 0 0;color:var(--text-2);font-size:15px;line-height:22px;} .vault-meter{display:flex;flex-direction:column;gap:7px;width:240px;max-width:100%;padding:0 0 4px;} .vault-meter:empty{display:none;} .vault-meter-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;color:var(--text-3);font-size:12.5px;line-height:16px;white-space:nowrap;font-variant-numeric:tabular-nums;} .vault-meter-figures{color:var(--text-2);} .vault-meter-figures strong{color:var(--text);font-weight:600;} .vault-meter .tv-progress{height:3px;margin:0;} .vault-meter-note{margin:0;color:var(--text-3);font-size:12px;line-height:17px;} /* Without Vault saving the meter gives way to a small Premium label (with what is stored beside it, when anything is). */ .vault-meter.is-premium{width:auto;align-items:flex-end;} .vault-premium-badge,.vault-premium-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(165,166,255,.3);border-radius:var(--radius-pill);background:rgba(165,166,255,.1);color:var(--accent);font-weight:600;letter-spacing:.01em;white-space:nowrap;} .vault-premium-badge{height:26px;padding:0 10px;font-size:12px;} .vault-premium-badge .app-icon,.vault-premium-tag .app-icon{width:13px;height:13px;} .vault-meter-row .vault-premium-badge{height:22px;padding:0 8px;font-size:11.5px;} /* ── The Premium Vault panel ───────────────────────────────────────────── A Vault that cannot save and holds nothing (vault.js lockedState): the media area becomes two columns -- on the left what Premium does for the Vault and one action, on the right three portrait cards, fanned, with a lock on the front one. The cards are licensed sample photographs shipped with the site (/assets/vault-art), never this account's media. */ .tv-page--vault{container:vault / inline-size;} .vault-premium{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:24px 40px;max-width:1240px;min-height:460px;padding:52px 56px;overflow:hidden;border:1px solid var(--border-card);border-radius:28px;background:radial-gradient(70% 90% at 80% 50%,rgba(141,126,255,.13),rgba(141,126,255,0) 70%),var(--bg-surface-1);} .vault-premium-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:520px;} .vault-premium-tag{height:28px;padding:0 12px;font-size:12.5px;} .vault-premium h2{margin:20px 0 0;font-size:36px;line-height:42px;font-weight:700;letter-spacing:-.035em;} .vault-premium-lead{margin:14px 0 0;color:var(--text-2);font-size:16px;line-height:25px;} .vault-premium-points{display:flex;flex-direction:column;gap:12px;margin:24px 0 0;padding:0;list-style:none;} .vault-premium-points li{display:flex;align-items:center;gap:12px;color:var(--text);font-size:15px;line-height:22px;} .vault-premium-points .app-icon{flex:none;box-sizing:content-box;width:13px;height:13px;padding:5px;border-radius:50%;background:rgba(165,166,255,.14);color:var(--accent);} .vault-premium-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px;} .tv-btn.vault-premium-cta{gap:8px;height:50px;min-height:50px;padding:0 26px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:#15142a;font-size:15px;font-weight:650;box-shadow:0 10px 28px -10px rgba(165,166,255,.6);transition:background-color .15s,transform .15s;} .tv-btn.vault-premium-cta:hover{background:var(--accent-hover);color:#15142a;} .tv-btn.vault-premium-cta:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;} .tv-btn.vault-premium-cta .app-icon{width:17px;height:17px;margin:0;} .vault-premium-link{color:var(--text-2);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:var(--border-hover);text-underline-offset:4px;} .vault-premium-link:hover{color:var(--text);} .vault-premium-note{margin:14px 0 0;max-width:48ch;color:var(--text-3);font-size:13px;line-height:19px;} .vault-premium-art{--card:186px;position:relative;align-self:stretch;min-height:380px;} .vault-premium-art::before{content:"";position:absolute;left:50%;top:50%;width:min(420px,100%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(141,126,255,.32),rgba(141,126,255,0));pointer-events:none;} .vault-art-card{position:absolute;top:50%;left:50%;width:var(--card);aspect-ratio:9/16;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:#1b1842;box-shadow:0 28px 56px -22px rgba(0,0,0,.75);} .vault-art-card img{display:block;width:100%;height:100%;object-fit:cover;} .vault-art-card.is-back-left{transform:translate(-118%,-47%) rotate(-8deg);} .vault-art-card.is-back-right{transform:translate(18%,-49%) rotate(8deg);} /* The cards behind sit back a little, so the front one and the copy lead. */ .vault-art-card:not(.is-front)::after{content:"";position:absolute;inset:0;background:rgba(12,11,26,.28);} .vault-art-card.is-front{z-index:2;width:calc(var(--card) * 1.1);transform:translate(-50%,-52%);border-color:rgba(165,166,255,.35);box-shadow:0 36px 72px -24px rgba(0,0,0,.85),0 0 56px -12px rgba(141,126,255,.5);} .vault-art-bars{position:absolute;top:10px;left:10px;right:10px;z-index:1;display:flex;gap:4px;} .vault-art-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);} .vault-art-bars i.is-done{background:rgba(255,255,255,.92);} .vault-art-bars i.is-on{background:linear-gradient(90deg,rgba(255,255,255,.92) 55%,rgba(255,255,255,.3) 55%);} /* A Story's progress bars read on any photo over a short top shade. */ .vault-art-card--story::before{content:"";position:absolute;inset:0 0 auto;height:56px;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));} .vault-art-play{position:absolute;left:68%;top:50%;z-index:1;display:grid;place-items:center;width:40px;height:40px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(10,9,26,.45);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);} .vault-art-play .app-icon{width:16px;height:16px;margin-left:2px;fill:currentColor;} .vault-art-lock{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(14,12,34,0),rgba(14,12,34,.38));} .vault-art-lock .app-icon{box-sizing:content-box;width:22px;height:22px;padding:15px;border:1px solid rgba(165,166,255,.5);border-radius:50%;background:rgba(20,18,44,.62);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);} @container vault (max-width:1100px){ .vault-premium{padding:44px 40px;gap:24px 28px;} .vault-premium h2{font-size:32px;line-height:38px;} .vault-premium-art{--card:160px;min-height:340px;} } /* Narrower, one column: label, heading and text, the points, the action, then the cards, smaller, under them. */ @container vault (max-width:820px){ .vault-premium{grid-template-columns:minmax(0,1fr);min-height:0;padding:36px 32px 8px;} .vault-premium-copy{max-width:none;} .vault-premium-art{--card:132px;min-height:270px;} } @container vault (max-width:520px){ .vault-premium{padding:26px 20px 4px;border-radius:22px;} /* The heading and the two points say it; the longer line steps aside. */ .vault-premium-lead{display:none;} .vault-premium h2{margin-top:16px;font-size:27px;line-height:33px;} .vault-premium-lead{font-size:15px;line-height:23px;} .vault-premium-points{gap:12px;margin-top:20px;} .vault-premium-points li{font-size:14.5px;align-items:flex-start;} .vault-premium-actions{flex-direction:column;align-items:stretch;width:100%;margin-top:26px;} .tv-btn.vault-premium-cta{width:100%;justify-content:center;} .vault-premium-link{align-self:center;padding:6px;} .vault-premium-art{--card:96px;min-height:220px;} .vault-art-card{border-radius:14px;} .vault-art-lock .app-icon{width:17px;height:17px;padding:10px;} .vault-art-play{width:30px;height:30px;} .vault-art-play .app-icon{width:13px;height:13px;} .vault-art-bars{top:7px;left:7px;right:7px;gap:3px;} .vault-art-bars i{height:2px;} } /* On phones the panel's own Premium label is enough; the header's would sit alone on its own row. */ /* An ended trial's "Read-only, your saved content is still here" banner (trial.js) says nothing true about a Vault that holds nothing; there the panel is the whole message. */ .tv-page--vault:has(.vault-premium) #trialSlot{display:none;} /* The header shares the panel's width, so its Premium label ends where the panel does instead of across an empty stretch. */ .tv-page--vault:has(.vault-premium) .vault-head{max-width:1240px;} /* With nothing saved the toolbar keeps its place but is switched off (vault.js): visible, clearly not usable. */ .vault-toolbar.is-inactive{opacity:.45;pointer-events:none;} .vault-notice--locked .tv-notice-text strong{color:var(--text);} .vault-meter.is-warning .vault-meter-note{color:var(--warn);} .vault-meter.is-full .vault-meter-note{color:var(--err);} .vault-meter-note a{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;} /* Full or over its storage: one banner across the page (the Creators watchlist-full pattern), never a second message under the meter. */ .vault-notice{margin:0 0 20px;} /* Tabs are the one filled control; search is a field, sort a compact select and Select a plain text button, so nothing competes equally. */ .vault-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:0 0 20px;} .vault-tabs{flex:none;} .vault-tabs .lib-tab{flex:1 0 auto;} .vault-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 400px;min-width:0;} .vault-controls .vault-search{flex:0 1 320px;width:auto;min-width:180px;} /* Select is boxed like Sort, so the two read as a pair of controls. */ .vault-select-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-card); color:var(--text-2);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:color .15s,border-color .15s;} /* The icon's wrapper is a flex box too, so the tick centres on the word instead of sitting on the text baseline above it. */ .vault-select-toggle>[data-icon]{display:inline-flex;align-items:center;} .vault-select-toggle .app-icon{width:15px;height:15px;} .vault-select-toggle:hover{color:var(--text);border-color:var(--border-hover);} .vault-select-toggle[aria-pressed="true"]{color:var(--text);border-color:var(--accent-line);} .vault-select-toggle[aria-pressed="true"] .app-icon{color:var(--accent);} .vault-select-toggle:focus-visible{outline:none;border-color:var(--accent-line);box-shadow:var(--focus);} .tv-page--vault .lib-skeleton-tile{aspect-ratio:9/16;border-radius:var(--radius-md);} .vault-select input{width:22px;height:22px;accent-color:var(--accent);cursor:pointer;} /* While selecting, a tap on a tile only selects, so card actions step aside. */ .tv-page--vault #vaultItems.is-selecting .lib-actions{display:none!important;} /* Selecting: one floating bar with the count, Cancel and the bulk actions. It exists only while selection mode is on. */ .vault-selection{position:fixed;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));z-index:58;display:flex;flex-direction:column;gap:8px;width:min(620px,calc(100% - 32px));margin:0 auto;} @media (min-width:1024px){body.has-side-nav .vault-selection{left:var(--sidebar-w);}} .tv-page:has(>.vault-selection:not([hidden])){padding-bottom:128px;} .vault-selection-bar{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 8px 8px 16px;border:1px solid var(--line-2);border-radius:18px;background:var(--surface-3);box-shadow:var(--shadow-pop);} .vault-selection-head{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;} .vault-selection-head p{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;} .vault-selection-head p.is-empty{font-weight:500;color:var(--text-2);} .vault-bar-text{height:40px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--text-2);font-size:14px;font-weight:500;cursor:pointer;} .vault-bar-text:hover{color:var(--text);background:var(--hover);} .vault-selection-actions{display:flex;align-items:center;gap:6px;flex:none;} .vault-bar-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:transparent;color:var(--text);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;} .vault-bar-btn:hover:not(:disabled){background:var(--hover);} .vault-bar-btn.is-danger{color:var(--err);} .vault-bar-btn.is-primary{border-color:transparent;background:var(--text);color:var(--on-light);} .vault-bar-btn.is-primary:hover:not(:disabled){background:var(--primary-hover);} .vault-bar-btn:disabled{opacity:.4;cursor:not-allowed;} .vault-bar-btn .app-icon{width:15px;height:15px;} /* Small desktop: slimmer tabs leave search room for its whole placeholder. */ @media (min-width:1024px) and (max-width:1199px){.vault-tabs .lib-tab{padding:0 14px;}} /* Tablet: tabs get their own row and search takes the rest of the next. */ @media (max-width:1023px){ .vault-toolbar{flex-direction:column;align-items:stretch;} .vault-tabs{align-self:flex-start;} .vault-controls{flex:none;} .vault-controls .vault-search{flex:1 1 auto;min-width:0;} } /* Phones: intentional rows, not a squeezed desktop toolbar. */ @media (max-width:639px){ .tv-page--vault{padding-top:14px;} .vault-head{flex-direction:column;align-items:stretch;gap:12px;margin:0 0 16px;} .vault-head h1{font-size:30px;line-height:36px;} .vault-head .tv-avatar--lg{width:56px;height:56px;} .vault-head-copy p{font-size:13.5px;line-height:19px;} .vault-meter{width:100%;gap:6px;padding:0;} .vault-notice{flex-wrap:wrap;align-items:flex-start;margin:0 0 14px;} .vault-notice .tv-notice-text{flex-basis:calc(100% - 48px);} .vault-notice .tv-notice-actions{flex-basis:100%;padding-left:44px;} .vault-toolbar{gap:10px;margin:0 0 14px;} /* The tabs keep full-size labels and swipe sideways when they don't fit; the far edge fades while there is more to reveal. */ .vault-tabs{display:flex;width:100%;align-self:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding:0 4px;} .vault-tabs.has-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);} .vault-tabs .lib-tab{height:40px;padding:0 14px;font-size:14px;} .vault-controls{flex-wrap:wrap;justify-content:space-between;gap:8px;} .vault-controls .vault-search{flex:1 0 100%;width:100%;} .vault-controls .vault-search input{height:46px;} /* Sort and Select keep their boxes, one at each end of a compact row. */ /* Two columns of 9:16 tiles, as on Stories. */ .tv-page--vault .vault-grid,.tv-page--vault .lib-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} /* The tile itself, its ⋮ and the action sheet are shared with Stories (section 10, "Phone media cards"). */ .vault-selection{width:calc(100% - 20px);bottom:calc(env(safe-area-inset-bottom) + 10px);} .tv-page:has(>.vault-selection:not([hidden])){padding-bottom:160px;} .vault-selection-bar{flex-direction:column;align-items:stretch;gap:6px;padding:6px 8px 8px;} .vault-selection-head{justify-content:space-between;padding-left:8px;} .vault-bar-text{height:44px;margin-right:-2px;} .vault-selection-actions{gap:8px;} .vault-selection-actions>.vault-bar-btn{flex:1 1 0;height:44px;padding:0 8px;} } /* Media cards wear the Stories tile (section 10, .lib-card--vault): six across on a laptop, never more than six, the tiles growing instead. */ @media (min-width:640px){.tv-page--vault .vault-grid,.tv-page--vault .lib-skeleton-grid{grid-template-columns:repeat(auto-fill,minmax(max(176px,calc((100% - 5 * 12px) / 6)),1fr));gap:12px;}} .lib-card--vault .lib-meta-row .vault-creator-link{font-size:12.5px;font-weight:600;color:#fff;} .lib-card--vault>.lib-actions>.lib-kebab>summary{width:32px;height:32px;border-radius:999px;background:rgba(18,18,18,.72);color:#f6f5f4;} .lib-card--vault>.lib-actions>.lib-kebab>summary:hover,.lib-card--vault>.lib-actions>.lib-kebab[open]>summary{background:rgba(18,18,18,.92);color:#fff;} .lib-card--vault.has-parts .vault-select{top:18px;} .lib-card--vault .lib-mark-fav{background:rgba(18,18,18,.72);color:#fbbf24;} .lib-card--vault .lib-mark-fav .app-icon{fill:currentColor;} /* 10 ─ Home (signed in) ───────────────────────────────────────────────────── Account facts come first, followed by a compact dashboard presentation of the shared universal input, then visual recent Stories and Vault saves. */ /* The form IDs and behavior stay shared with public Home. Only the signed-in presentation changes: full content width, one compact row on desktop. */ .tv-home-tool{width:100%;margin:0 0 16px;} .tv-home-tool .tv-universal{max-width:none;margin:0;gap:8px;} .tv-home-tool .tv-universal-label{font-size:14px;line-height:20px;} .tv-home-tool .tv-universal-field{flex-wrap:nowrap;align-items:center;align-content:center;gap:8px;min-height:64px;padding:9px 10px 9px 14px;border-radius:var(--radius-md);background:var(--bg-card);} .tv-home-tool .tv-universal-field>.tv-field-icon{order:0;flex:none;width:32px;height:44px;} .tv-home-tool .tv-universal-field>input{order:0;flex:1 1 auto;width:auto;min-width:0;height:44px;font-size:15px;line-height:22px;} .tv-home-tool .tv-universal-paste{height:44px;margin-left:0;padding:0 12px;} .tv-home-tool .tv-universal-field>.tv-universal-submit{height:44px;min-height:44px;padding:0 20px;} .tv-home-tool .tv-universal-support{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px 18px;width:100%;margin:8px 0 0;padding:0 2px;color:var(--text-secondary);font-size:11.5px;line-height:16px;} .tv-home-tool .tv-universal-support[hidden]{display:none;} .tv-home-tool .tv-universal-results{max-width:none;margin-left:0;margin-right:0;} /* Results use the same width as the input above them: the creator, its Stories/Posts/Highlights and direct downloads all sit on Home's one grid. (Public Home keeps the composer width.) */ .tv-home-tool .tv-universal-results :is(.tv-results,.tv-dl-results){max-width:none;} @media (max-width:767px){ .tv-home-tool .tv-universal-field{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:52px 44px;align-items:center;gap:8px 4px;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;} .tv-home-tool .tv-universal-field::before{content:"";position:absolute;left:0;right:0;top:0;height:52px;border:1px solid var(--border-panel);border-radius:var(--radius-md);background:var(--bg-card);pointer-events:none;} .tv-home-tool .tv-universal-field:hover::before{border-color:var(--border-strong);} .tv-home-tool .tv-universal-field:focus-within{border-color:transparent;box-shadow:none;} .tv-home-tool .tv-universal-field:focus-within::before{border-color:var(--accent-line);box-shadow:var(--focus);} .tv-home-tool .tv-universal-field>.tv-field-icon{display:flex;grid-column:1;grid-row:1;z-index:1;width:36px;height:52px;margin-left:8px;} .tv-home-tool .tv-universal-field>input{grid-column:2;grid-row:1;z-index:1;width:100%;min-width:0;height:52px;font-size:16px;} .tv-home-tool .tv-universal-paste{grid-column:3;grid-row:1;z-index:1;justify-content:center;width:auto;height:44px;margin:0 4px 0 0;padding:0 10px;gap:6px;font-size:13px;} .tv-home-tool .tv-universal-paste .app-icon{width:15px;height:15px;} .tv-home-tool .tv-universal-field>.tv-universal-submit{grid-column:1/-1;grid-row:2;width:100%;height:44px;min-height:44px;padding:0 18px;} .tv-home-tool .tv-universal-support{display:block;margin-top:8px;} } /* A CTA that names a creator ("Monitor @a_24_character_username — Free") wraps inside its button on narrow cards instead of overflowing them. */ .tv-btn.tv-btn--wrap,.tv-result-actions .tv-btn.tv-btn--wrap{height:auto;max-width:100%;min-width:0;padding-top:9px;padding-bottom:9px;line-height:1.25;white-space:normal;text-align:center;overflow-wrap:anywhere;} /* Contextual upgrade prompt: what happened, what the next plan adds, one action. Inline and quiet -- never a popup. */ .tv-upgrade-prompt{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:12px 0 0;padding:14px 16px;border:1px solid var(--accent-line);border-radius:var(--radius-card);background:var(--bg-card);} .tv-upgrade-prompt-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px;} .tv-upgrade-prompt-copy strong{color:var(--text);font-size:14px;line-height:20px;font-weight:600;} .tv-upgrade-prompt-copy span{color:var(--text-2);font-size:13px;line-height:18px;} .tv-upgrade-prompt .tv-btn{flex:none;} .tv-stat-link{display:inline-block;margin-top:8px;color:var(--accent);font-size:13px;font-weight:600;} @media (max-width:520px){.tv-upgrade-prompt .tv-btn{width:100%;}} /* 11 ─ Tool pages ──────────────────────────────────────────────────────────── The public SEO tool pages (Story Viewer, Story Downloader, Story Saver, Downloader, Photo, Slideshow, Highlight, the guide):
. The hero is section 12's .tv-seo-hero; the copy below it is product UI with its own surface level each, strongest first: tool container, result, CTA and related tools, capabilities and Good to know rows, then steps, FAQ and Learn more on dividers only. */ .tv-page--tool{max-width:calc(880px + 2 * var(--gutter));padding-top:0;} /* Tool container: tabs, field and button on the strongest surface. */ /* Trust line: the page's search phrase first, then two plain facts. */ .tv-trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 2px 0;color:var(--text-3);font-size:12.5px;line-height:18px;text-align:left;} .tv-trust>span{display:inline-flex;align-items:center;gap:6px;} .tv-trust .app-icon{width:14px;height:14px;color:var(--text-3);} .tv-trust>.is-lead{color:var(--text-2);font-weight:500;} .tv-trust>.is-lead .app-icon{color:var(--ok);} /* Results sit in the page column, aligned with the tool. */ .tv-page--tool .tv-results,.tv-page--tool .tv-dl-results{margin-left:0;margin-right:0;} .tv-page--tool #storyResults,.tv-page--tool #highlightResults{max-width:none;} /* Sections: no rules between them, space does the separating. */ .tv-page--tool .tv-section{margin:0;padding:56px 0 0;} .tv-page--tool .tv-section+.tv-section{border-top:0;} .tv-page--tool .tv-hero+.tv-section{margin-top:16px;} .tv-page--tool .tv-section-head{margin-bottom:16px;} .tv-page--tool .tv-section-head h2{font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.01em;} .tv-page--tool .tv-section-lede{max-width:64ch;} .tv-page--tool>.tv-section:last-child{padding-bottom:8px;} /* 3-step guide: icon, number, title, one sentence; hairlines, no box. */ /* Capability grid: light surface, no border, violet line icons. */ /* Good to know: closed rows on one light surface. The full text stays in the HTML; a row is 52px tall until it is opened. */ .tv-disclose{border-radius:16px;background:var(--bg-surface-1);overflow:hidden;} .tv-disclose details+details{border-top:1px solid var(--border-default);} .tv-disclose summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px 0 16px;list-style:none;cursor:pointer;transition:background-color .15s;} .tv-disclose summary::-webkit-details-marker{display:none;} .tv-disclose summary:hover{background:var(--hover);} .tv-disclose summary>.app-icon{width:18px;height:18px;color:var(--text-3);} .tv-disclose summary h3{flex:1;min-width:0;margin:0;padding:15px 0;font-size:14px;line-height:20px;font-weight:500;} .tv-disclose summary::after{content:"";width:7px;height:7px;flex:none;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(-45deg);transition:transform .15s;} .tv-disclose details[open]>summary::after{transform:rotate(45deg) translate(-2px,-2px);} .tv-disclose details>p{margin:0;padding:0 18px 16px 46px;max-width:76ch;color:var(--text-2);font-size:13.5px;line-height:21px;} .tv-disclose details>p b{color:var(--text);font-weight:500;} .tv-disclose details>p a{color:var(--accent);text-decoration:none;} .tv-disclose details>p a:hover{text-decoration:underline;} /* FAQ: the one FAQ design on every page, built on the disclosure rows above.

…

Question

Answer

The question stays an H3 and every answer stays in the HTML. Column width, heading and rows live here; a page only sets its own section padding. */ .tv-faq>*{max-width:880px;} .tv-section.tv-faq>.tv-section-head{margin-bottom:20px;} .tv-section.tv-faq>.tv-section-head h2{font-size:24px;line-height:30px;font-weight:650;letter-spacing:-.02em;} /* The guide's troubleshooting list (.tv-guide-fixes) is the same accordion at the same size, so both read as one component on that page. */ :is(.tv-faq .tv-disclose,.tv-guide-fixes) summary{gap:14px;min-height:60px;padding:0 20px 0 18px;} :is(.tv-faq .tv-disclose,.tv-guide-fixes) summary h3{padding:18px 0;font-size:15.5px;line-height:23px;font-weight:500;} :is(.tv-faq .tv-disclose,.tv-guide-fixes) summary>.app-icon{width:18px;height:18px;} :is(.tv-faq .tv-disclose,.tv-guide-fixes) details[open]>summary>.app-icon{color:var(--accent);} :is(.tv-faq .tv-disclose,.tv-guide-fixes) details>p{padding:0 24px 20px 50px;max-width:none;font-size:15px;line-height:25px;} :is(.tv-faq .tv-disclose,.tv-guide-fixes) details>p+p{margin-top:-8px;} @media (max-width:639px){ .tv-section.tv-faq>.tv-section-head h2{font-size:21px;line-height:27px;} :is(.tv-faq .tv-disclose,.tv-guide-fixes) summary{padding:0 16px 0 14px;gap:12px;} :is(.tv-faq .tv-disclose,.tv-guide-fixes) summary h3{padding:16px 0;font-size:15px;line-height:22px;} :is(.tv-faq .tv-disclose,.tv-guide-fixes) details>p{padding:0 16px 18px 44px;font-size:15px;line-height:24px;} } /* Learn more: plain editorial links. */ /* Related tools: small product navigation cards with an icon tile. */ .tv-related{gap:10px;} .tv-related li{position:relative;min-width:0;} .tv-related li::before{content:"";position:absolute;left:14px;top:50%;width:36px;height:36px;margin-top:-18px;border:1px solid var(--border-card);border-radius:10px;background:var(--bg-surface-2);pointer-events:none;} .tv-related li>.app-icon{position:absolute;z-index:1;left:23px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--text-2);pointer-events:none;} .tv-related a{justify-content:center;gap:2px;padding:14px 36px 14px 64px;border-color:var(--border-card);border-radius:14px;background:transparent;transition:background-color .15s,border-color .15s;} .tv-related a:hover{background:var(--hover);border-color:var(--border-hover);} .tv-related a::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-4px;border-right:1.5px solid var(--text-3);border-top:1.5px solid var(--text-3);transform:rotate(45deg);} .tv-related strong{font-size:14px;} .tv-related span{color:var(--text-3);font-size:12.5px;line-height:18px;} /* Final CTA: the one section with a faint violet wash. */ /* Highlighted note: one rule the visitor must know. */ /* Story Saver: the monitoring flow, creator to Story history. */ /* The guide's meta line replaces the old 24-hour pill. */ .tv-guide-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0 0;color:var(--text-3);font-size:12.5px;} .tv-guide-meta>span{display:inline-flex;align-items:center;gap:6px;} .tv-guide-meta .app-icon{width:14px;height:14px;} .tv-guide-meta .tv-guide-updated{margin:0;} @media (max-width:639px){ .tv-page--tool .tv-section{padding-top:44px;} .tv-page--tool .tv-hero+.tv-section{margin-top:8px;} .tv-page--tool .tv-section-head h2{font-size:17px;line-height:24px;} .tv-disclose details>p{padding-left:16px;} .tv-related{gap:0;border:1px solid var(--border-card);border-radius:16px;overflow:hidden;} .tv-related li+li{border-top:1px solid var(--border-card);} .tv-related a{border:0;border-radius:0;} } /* 12 ─ SEO tool pages: two-tone layout ─────────────────────────────────────────
. Builds on section 11 (tool container, disclosure rows, related tools). Two areas: .tv-seo-hero full-width dark band: centred H1, one line, the real tool, the benefit row (.tv-benefits) and the tool's results. .tv-section the supporting area on the page background, one centred column: the Story Saver promo (.tv-seo-promo), one FAQ (.tv-faq) and related tools (.tv-seo-next). The Story Saver itself leads with its saved-Story library preview (#library) and the page's one sign-up row. No numbered steps, no previews, no extra panels. Pages differ only in their tool and their copy. */ .tv-page--seo{--seo-col:880px;max-width:none;padding:0 0 80px;} .tv-page--seo>.tv-section{width:100%;max-width:calc(var(--seo-col) + 2 * var(--gutter));margin:0 auto;padding:56px var(--gutter) 0;} .tv-page--seo>.tv-hero+.tv-section{margin-top:0;} .tv-page--seo .tv-section-head{margin-bottom:20px;} .tv-page--seo .tv-section-head h2{font-size:24px;line-height:30px;font-weight:650;letter-spacing:-.02em;} .tv-page--seo .tv-section-lede{margin:-8px 0 20px;color:var(--text-2);font-size:15.5px;line-height:25px;} /* Hero: the dark band, edge to edge. The tool is the focal point; violet marks only its focus and the selected tab. Every tool page shares these proportions, set once as --hero-* tokens and re-tuned per breakpoint below. Below desktop they follow the viewport: the title with its width, the padding and gaps with its small height (svh, so they never jump as the browser bar moves), so a tall phone gets room and a short one keeps the button on the first screen. No min-height: the band hugs its content so nothing above the tool moves when a result arrives. */ .tv-page--seo .tv-seo-hero{--hero-pad-top:64px;--hero-pad-bottom:48px;--hero-title:44px;--hero-gap-copy:14px;--hero-gap-tool:28px;--hero-gap-benefits:20px; align-items:center;justify-content:flex-start;min-height:0;padding:var(--hero-pad-top) var(--gutter) var(--hero-pad-bottom);border-bottom:1px solid var(--border-default);background:var(--bg-hero);text-align:center;} .tv-page--seo .tv-seo-hero>*{width:100%;max-width:680px;} .tv-page--seo .tv-seo-hero h1{max-width:22ch;margin:0 auto;font-size:var(--hero-title);line-height:1.08;font-weight:700;letter-spacing:-.035em;text-wrap:balance;} .tv-page--seo .tv-seo-hero>p{max-width:54ch;margin:var(--hero-gap-copy) auto 0;color:var(--text-2);font-size:16.5px;line-height:26px;text-wrap:pretty;} /* The tool: the universal input, the same one-row field as Home's (section 13 shares those rules), with the page's own support line under it. */ .tv-page--seo .tv-seo-hero .tv-universal{margin:var(--hero-gap-tool) auto 0;} .tv-page--seo .tv-universal-support{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 12px;margin:10px auto 0;color:var(--text-3);font-size:13px;line-height:18px;} .tv-page--seo .tv-universal-support[hidden]{display:none;} .tv-page--seo .tv-seo-hero>.tv-universal-results{max-width:var(--seo-col);} .tv-page--seo .tv-seo-hero>.tv-universal-results>:not(:empty){margin-top:28px;} .tv-page--seo .tv-seo-hero>.tv-benefits{margin-top:var(--hero-gap-benefits);} .tv-page--seo .tv-seo-hero>.tv-results,.tv-page--seo .tv-seo-hero>[data-downloader="results"], .tv-page--seo .tv-seo-hero>#storyResults,.tv-page--seo .tv-seo-hero>#highlightResults{max-width:var(--seo-col);text-align:left;} .tv-page--seo .tv-seo-hero>.tv-results:not([hidden]):not(:empty), .tv-page--seo .tv-seo-hero>[data-downloader="results"]:has(#downloaderResults:not(:empty)){padding-top:28px;} /* Benefit row: three quiet facts under the tool. One line on wider screens; on phones three centred columns, icon above a one-line label, never two plus one and never a wrapped label. */ .tv-benefits{display:flex;justify-content:center;gap:0 32px;margin:20px auto 0;padding:0;list-style:none;color:var(--text-2);font-size:13.5px;line-height:20px;} .tv-benefits li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;} .tv-benefits .app-icon{width:16px;height:16px;flex:none;color:var(--text-3);} /* Story Saver promo: one line of copy and one action, between hairlines, secondary to the tool but plainly clickable. */ .tv-seo-promo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 20px;padding:20px 0;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);} .tv-page--seo>.tv-hero+.tv-seo-promo-wrap .tv-seo-promo{border-top:0;padding-top:0;} .tv-seo-promo-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft);color:var(--accent);} .tv-seo-promo-icon .app-icon{width:19px;height:19px;} .tv-seo-promo-copy :is(h2,h3){margin:0;font-size:16px;line-height:23px;font-weight:600;letter-spacing:-.01em;} .tv-seo-promo-copy p{margin:3px 0 0;color:var(--text-2);font-size:14.5px;line-height:22px;} .tv-seo-promo-btn{height:42px;min-height:42px;padding:0 16px;border:1px solid var(--accent-line);border-radius:12px;background:transparent;color:var(--accent);font-size:14px;font-weight:600;white-space:nowrap;} .tv-seo-promo-btn::after{content:"";width:6px;height:6px;margin-left:4px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);} .tv-seo-promo-btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);} /* Highlight Downloader results: the "future Stories" offer on the creator card, and an opened Highlight's Stories sized for thumbs (two per row on phones, so the date and a full-size download button fit). */ #highlightResults .tv-creator-card-copy h2{overflow-wrap:anywhere;} #highlightResults .tv-creator-card-bridge strong{display:block;color:var(--text);font-weight:600;} #highlightResults .highlight-items .story-result-tile>div>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} @media (pointer:coarse){ #highlightResults .highlight-items .story-result-download{width:44px;height:44px;} #highlightResults .retry-btn{height:44px;} } @media (max-width:767px){ #highlightResults .highlight-items .story-results-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;} /* The promo below draws the rule; avoid a double line under the steps. */ .tv-page--seo #how .tv-home-steps li:last-child{border-bottom:0;} } /* Story Saver: the page's one sign-up row, under the library preview. */ .tv-seo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:28px;} .tv-seo-actions .tv-btn{height:44px;min-height:44px;padding:0 18px;border-radius:12px;font-size:14px;} .tv-seo-actions .tv-btn--secondary{background:transparent;border:1px solid var(--border-strong);} .tv-seo-actions .tv-btn--secondary:hover{background:var(--hover);} .tv-seo-actions small{color:var(--text-3);font-size:13px;} /* Related tools: one compact joined row. */ .tv-page--seo .tv-seo-next .tv-section-head{margin-bottom:14px;} .tv-page--seo .tv-seo-next .tv-section-head h2{font-size:16px;line-height:22px;color:var(--text-2);font-weight:600;letter-spacing:0;} .tv-page--seo .tv-seo-next .tv-related{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--border-card);border-radius:18px;overflow:hidden;} .tv-page--seo .tv-seo-next .tv-related li+li{border-left:1px solid var(--border-card);} .tv-page--seo .tv-seo-next .tv-related a{border:0;border-radius:0;min-height:84px;} .tv-page--seo .tv-seo-next .tv-related strong{font-size:14.5px;} .tv-page--seo .tv-seo-next .tv-related span{color:var(--text-2);font-size:13.5px;line-height:20px;} .tv-page--seo .tv-seo-next .tv-related li:hover>.app-icon{color:var(--accent);} /* Tools (/tools): the universal input in the hero is the page's tool; the Story Saver promo is framed as its own card, and the pages for each content type follow as a quieter list (two across on tablets). */ .tv-page--tools .tv-seo-promo{padding:18px 20px;border:1px solid var(--border-card);border-radius:14px;} .tv-page--tools .tv-tools-group .tv-section-head h2{font-size:16px;line-height:22px;color:var(--text-2);font-weight:600;letter-spacing:0;} @media (min-width:640px) and (max-width:1023px){ .tv-page--tools .tv-related{grid-template-columns:repeat(2,minmax(0,1fr));} } /* Story Saver: the saved-Story library. An example screenshot (the guide's .tv-guide-shot) sits beside the copy and sign-up row on wider screens and between them on phones; the last row takes the screenshot's extra height. */ .tv-saver-library .tv-section-lede{max-width:62ch;} .tv-saver-library .tv-guide-shot{max-width:340px;margin:4px 0 0;} @media (min-width:768px){ .tv-saver-library{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto auto auto 1fr;column-gap:40px;} .tv-saver-library>*{grid-column:1;} .tv-saver-library>.tv-guide-shot{grid-column:2;grid-row:1 / span 4;margin:0;} .tv-saver-library>.tv-seo-actions{align-self:start;} } /* Story Saver: the limit of scheduled checks, one quiet line under the manual-vs-automatic table. */ .tv-compare-note{display:flex;gap:8px;margin:12px 0 0;color:var(--text-3);font-size:13.5px;line-height:20px;} .tv-compare-note>.app-icon{flex:none;width:15px;height:15px;margin-top:2.5px;} /* Phones: the steps put the icon beside the title so the copy gets the full width; each comparison row is one card with the two answers side by side; the example screenshot is smaller. */ @media (max-width:767px){ .tv-saver-how .tv-home-steps li{grid-template-columns:20px minmax(0,1fr);column-gap:8px;row-gap:4px;padding:12px 0;} .tv-saver-how .tv-home-step-icon{grid-row:auto;align-self:center;margin:0;} .tv-saver-how .tv-home-steps p{grid-column:1 / -1;} .tv-saver-compare .story-compare-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px;margin:0 0 8px;padding:12px 14px;} .tv-saver-compare .story-compare-table td{display:block;padding:0;border:0;text-align:left;} .tv-saver-compare .story-compare-table td:first-child{grid-column:1 / -1;} .tv-saver-compare .story-compare-table td:not(:first-child)::before{display:block;margin-bottom:2px;font-size:12px;line-height:16px;} .tv-saver-library .tv-guide-shot{max-width:260px;margin-top:0;} } /* Tablet: the title grows from 38px at 640px wide to desktop's 44px at 1024px, so crossing into the desktop layout changes nothing. */ @media (max-width:1023px){ .tv-page--seo .tv-seo-hero{--hero-pad-top:clamp(48px,6.5svh,72px);--hero-pad-bottom:clamp(40px,5.5svh,60px);--hero-title:clamp(38px,1.6vw + 28px,44px);} } /* Phones: 31px at 320px wide up to 38px from ~450px, meeting the tablet size. Spacing is the viewport-height-driven part: at 568px tall the band is about as tight as before; at 844px+ it opens up by ~60px. */ @media (max-width:639px){ .tv-page--seo{padding-bottom:56px;} .tv-page--seo .tv-seo-hero{--hero-pad-top:clamp(36px,6.5svh,60px);--hero-pad-bottom:clamp(36px,5.5svh,52px);--hero-title:clamp(31px,5.6vw + 13px,38px); --hero-gap-copy:clamp(10px,1.5svh,14px);--hero-gap-tool:clamp(22px,3.4svh,32px);--hero-gap-benefits:clamp(18px,2.6svh,24px);} .tv-page--seo .tv-seo-hero h1{line-height:1.1;letter-spacing:-.03em;} .tv-page--seo .tv-seo-hero>p{font-size:15.5px;line-height:24px;} .tv-benefits{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-evenly;gap:0 6px;margin-top:18px;font-size:12.5px;line-height:17px;} .tv-benefits li{flex-direction:column;gap:6px;text-align:center;} .tv-page--seo>.tv-section{padding:44px 16px 0;} .tv-page--seo>.tv-hero+.tv-section{padding-top:32px;} .tv-page--seo .tv-section-head h2{font-size:21px;line-height:27px;} .tv-seo-promo{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px;padding:18px 0;} .tv-seo-promo-btn{grid-column:1 / -1;justify-content:center;height:46px;min-height:46px;} .tv-seo-actions .tv-btn{flex:1 1 100%;height:48px;min-height:48px;} .tv-seo-actions small{flex:1 1 100%;text-align:center;} .tv-page--seo .tv-seo-next .tv-related{grid-template-columns:minmax(0,1fr);} .tv-page--seo .tv-seo-next .tv-related li+li{border-left:0;border-top:1px solid var(--border-card);} .tv-page--seo .tv-seo-next .tv-related a{min-height:68px;} } /* The narrowest phones: one line per benefit still fits at 12px. */ @media (max-width:359px){ .tv-benefits{font-size:12px;} } /* Guides (docs/GUIDES.md): help-centre tutorials in one centred reading column, built from one set of parts so a new guide is new copy, not new CSS. Spacing separates sections; borders and fills are kept for the few things that are controls (the tool, the two paths, the accordions). .tv-guide the article: header, tool, paths, sections, close .tv-guide-head breadcrumb (.tv-guide-crumbs), one h1, one summary, muted .tv-guide-meta (reading time, updated date) .tv-guide-tool the working tool, first: a small label, the shared universal input, its support line, one trust line .tv-guide-choose two compact in-page links (.tv-guide-path) .tv-guide-section h2 + .tv-guide-lede + ol.tv-guide-steps .tv-guide-step number, h3, 1–2 sentences, optional .tv-guide-shot .tv-guide-note one informational note (a limit), quiet surface .tv-guide-fixes troubleshooting on the shared .tv-disclose accordion FAQ the shared .tv-faq accordion, unchanged .tv-guide-close one closing question with one action */ .tv-page--guide{max-width:calc(720px + 2 * var(--gutter));} .tv-guide{display:flex;flex-direction:column;min-width:0;} /* Links inside running text; the breadcrumb, paths and buttons keep their own. */ .tv-guide p a:not(.tv-btn){color:var(--accent);text-decoration:none;} .tv-guide p a:not(.tv-btn):hover{text-decoration:underline;} .tv-guide b{color:var(--text);font-weight:600;} .tv-guide :is(.tv-guide-section,.tv-faq,.tv-guide-tool,details){scroll-margin-top:88px;} .tv-guide-head{padding:40px 0 0;} .tv-guide-crumbs ol{display:flex;align-items:center;margin:0 0 14px;padding:0;list-style:none;color:var(--text-3);font-size:12.5px;line-height:18px;} .tv-guide-crumbs li{flex:none;white-space:nowrap;} .tv-guide-crumbs li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;} .tv-guide-crumbs li+li::before{content:"/";margin:0 8px;color:var(--border-strong);} .tv-guide-crumbs a{color:var(--text-2);text-decoration:none;border-radius:4px;} .tv-guide-crumbs a:hover{color:var(--text);} .tv-guide-head h1{margin:0;font-size:38px;line-height:1.12;font-weight:700;letter-spacing:-.03em;text-wrap:balance;} .tv-guide-summary{max-width:62ch;margin:12px 0 0;color:var(--text-2);font-size:16px;line-height:26px;} .tv-guide-head .tv-guide-meta{margin-top:12px;} /* The tool: the field is the only box. */ .tv-guide-tool{margin-top:28px;} .tv-guide-tool-title{margin:0;color:var(--text);font-size:14px;line-height:20px;font-weight:600;} .tv-guide-tool .tv-universal{max-width:none;margin:10px 0 0;} .tv-guide-tool>.tv-universal-support{margin:10px 0 0;padding:0 2px;color:var(--text-3);font-size:13px;line-height:19px;text-align:left;} .tv-guide-trust{margin:4px 0 0;padding:0 2px;color:var(--text-3);font-size:12.5px;line-height:18px;} .tv-guide-tool>.tv-universal-results{max-width:none;} .tv-guide-tool>.tv-universal-results>:not(:empty){margin-top:20px;} /* Two compact in-page links to the workflows. */ .tv-guide-choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:28px;} .tv-guide-path{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:1px solid var(--border-default);border-radius:12px;color:var(--text);text-decoration:none; transition:background-color var(--duration-base),border-color var(--duration-base);} .tv-guide-path:hover{border-color:var(--border-strong);background:var(--bg-surface-1);} .tv-guide-path:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .tv-guide-path>.app-icon{flex:none;width:18px;height:18px;color:var(--accent);} .tv-guide-path-text{display:flex;flex-direction:column;gap:1px;min-width:0;} .tv-guide-path strong{font-size:14.5px;line-height:20px;font-weight:600;} .tv-guide-path-text>span{color:var(--text-3);font-size:13px;line-height:18px;} /* Sections. */ .tv-guide-section,.tv-guide>.tv-faq,.tv-guide-close{margin-top:56px;} .tv-guide>.tv-faq{padding:0;} .tv-guide-section>h2,.tv-guide .tv-faq .tv-section-head h2{margin:0;font-size:24px;line-height:30px;font-weight:650;letter-spacing:-.02em;} .tv-guide .tv-faq .tv-section-head{margin-bottom:16px;} .tv-guide-lede{max-width:64ch;margin:8px 0 0;color:var(--text-2);font-size:15.5px;line-height:25px;} /* Numbered steps: number + heading, copy beside a cropped screenshot. */ .tv-guide-steps{display:flex;flex-direction:column;gap:28px;margin:24px 0 0;padding:0;list-style:none;counter-reset:guide-step;} .tv-guide-step{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px 32px;align-items:start;counter-increment:guide-step;} .tv-guide-step:not(:has(.tv-guide-shot)){grid-template-columns:minmax(0,1fr);} .tv-guide-step-body{position:relative;min-width:0;padding-left:40px;} .tv-guide-step-body::before{content:counter(guide-step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:650;} .tv-guide-step h3{margin:0;font-size:16.5px;line-height:24px;font-weight:600;letter-spacing:-.01em;} .tv-guide-step p{margin:6px 0 0;color:var(--text-2);font-size:15px;line-height:24px;} .tv-guide-shot{margin:0;} .tv-guide-shot img{display:block;width:100%;height:auto;border:1px solid var(--border-card);border-radius:12px;background:var(--bg-surface-1);} /* One informational note. */ .tv-guide-note{display:flex;gap:10px;margin:28px 0 0;padding:14px 16px;border-radius:12px;background:var(--bg-surface-1);color:var(--text-2);font-size:14px;line-height:22px;} .tv-guide-note>.app-icon{flex:none;width:16px;height:16px;margin-top:3px;color:var(--text-3);} .tv-guide-fixes{margin-top:16px;} /* Closing: one question, one action. */ .tv-guide-close{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:28px;border-top:1px solid var(--border-default);} .tv-guide-close>div{min-width:0;} .tv-guide-close h2{margin:0;font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.01em;} .tv-guide-close p{max-width:56ch;margin:6px 0 0;color:var(--text-2);font-size:14.5px;line-height:23px;} .tv-guide-close .tv-btn{flex:none;height:44px;min-height:44px;padding:0 18px;border-radius:12px;} @media (max-width:767px){ .tv-guide-step{grid-template-columns:minmax(0,1fr);} .tv-guide-shot{max-width:320px;margin-left:40px;} } @media (max-width:639px){ .tv-guide-head{padding-top:16px;} .tv-guide-head h1{font-size:30px;} .tv-guide-summary{font-size:15px;line-height:24px;} .tv-guide-tool,.tv-guide-choose{margin-top:24px;} .tv-guide-choose{grid-template-columns:minmax(0,1fr);} .tv-guide-section,.tv-guide>.tv-faq,.tv-guide-close{margin-top:44px;} .tv-guide-section>h2,.tv-guide .tv-faq .tv-section-head h2{font-size:21px;line-height:27px;} .tv-guide-lede{font-size:15px;line-height:24px;} .tv-guide-steps{gap:24px;} .tv-guide-step-body{padding-left:38px;} .tv-guide-shot{margin-left:0;} .tv-guide-close{flex-direction:column;align-items:stretch;} .tv-guide-close .tv-btn{width:100%;} } /* 13 ─ Public homepage ───────────────────────────────────────────────────────
. One promise: track a creator and StoryHideout saves the public Stories it detects. The dark hero band (shared with the SEO pages) holds the headline and the creator field over a few faint drifting particles; the rest is one centred column on the page background, each section built differently so the page does not read as a stack of identical card grids: #product copy and a plain feature list beside a framed screenshot of the real app (.tv-home-showcase, .tv-home-shot) #how three equal step cards (.tv-home-flow) #pricing four plan cards with only the facts that differ #faq the shared accordion */ .tv-page--home{--home-col:1200px;max-width:none;padding:0 0 80px;} .tv-page--home>.tv-section{width:100%;max-width:calc(var(--home-col) + 2 * var(--gutter));margin:0 auto;padding:96px var(--gutter) 0;} .tv-page--home>.tv-section+.tv-section{border-top:0;} .tv-page--home>.tv-hero+.tv-section{margin-top:0;padding-top:80px;} .tv-page--home .tv-section-head{margin-bottom:24px;} .tv-page--home .tv-section-head h2{font-size:24px;line-height:30px;font-weight:650;letter-spacing:-.02em;} .tv-page--home .tv-section-head a{display:inline-flex;align-items:center;min-height:32px;color:var(--accent);font-size:13.5px;font-weight:600;} .tv-page--home .tv-section-head a:hover{color:var(--accent-2);} .tv-page--home .tv-section-lede{max-width:60ch;margin:-16px 0 28px;font-size:15px;line-height:24px;} /* Hero: centred, compact, one field. Its label is visually hidden; the animated placeholder shows what to enter. */ .tv-page--home .tv-home-hero{align-items:center;min-height:0;padding:72px var(--gutter) 44px;border-bottom:1px solid var(--border-default);background:var(--bg-hero);} .tv-page--home .tv-home-hero>*{width:100%;max-width:640px;} .tv-page--home .tv-home-hero h1{max-width:none;font-size:58px;line-height:1.05;letter-spacing:-.04em;text-wrap:nowrap;} .tv-page--home .tv-home-hero h1 .tv-hl{display:block;} .tv-page--home .tv-home-hero>p{max-width:52ch;margin:16px auto 0;font-size:17px;line-height:27px;text-wrap:pretty;} .tv-page--home .tv-universal{margin:32px auto 0;gap:10px;} /* One row: icon, field, Paste, Find Creator. The SEO tool pages', the guide's and Search's universal input (sections 12, the guide and 15) are the same field, so they stay in step with Home. */ :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field{flex-wrap:nowrap;align-items:center;align-content:center;gap:6px;min-height:64px;padding:9px 9px 9px 14px;border-radius:18px;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field>.tv-field-icon{order:0;flex:none;width:28px;height:44px;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field>input{order:0;flex:1 1 auto;width:auto;min-width:0;height:44px;font-size:16px;line-height:22px;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-paste{height:44px;margin-left:0;padding:0 12px;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field>.tv-universal-submit{height:46px;min-height:46px;padding:0 20px;border-radius:12px;background:var(--text-primary);color:var(--on-light);} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field>.tv-universal-submit:hover{background:var(--primary-hover);} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal.is-loading .tv-universal-submit{background:var(--bg-selected);color:var(--text-2);} /* The benefit row: three quiet facts, a small violet icon left of muted text. No pills. One row; on the narrowest phones it wraps, never breaking a label. */ .tv-page--home .tv-universal-benefits{flex-wrap:wrap;gap:8px 24px;margin-top:22px;} .tv-page--home .tv-universal-benefits li{gap:7px;min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--text-2);font-size:13.5px;line-height:20px;white-space:nowrap;} .tv-page--home .tv-universal-benefits li[data-icon]:not([data-icon-hydrated="true"])::before{content:"";display:inline-block;width:15px;height:15px;flex:none;} .tv-page--home .tv-universal-benefits .app-icon{width:15px;height:15px;flex:none;color:var(--accent);} /* A result belongs to the field: the band widens for it. */ .tv-page--home .tv-home-hero>.tv-universal-results{max-width:640px;} .tv-page--home .tv-home-hero>.tv-universal-results:has(.tv-dl-photo:nth-child(4)){max-width:var(--result-photos-w);} .tv-page--home .tv-universal-results :is(.tv-results,.tv-dl-results){max-width:none;} .tv-page--home .tv-home-hero>.tv-universal-results.is-connected{padding-bottom:8px;} /* Sixteen faint dots, with only transform and opacity animated. The ambient tint is static; no animated shadows, filters, script or pointer events. */ .tv-page--home .tv-home-hero{position:relative;isolation:isolate;} .tv-page--home .tv-home-hero>.tv-home-sky{position:absolute;inset:0;z-index:-1;width:auto;max-width:none;margin:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 12%,rgba(165,166,255,.025),transparent 62%);} .tv-home-sky>i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--text-primary);opacity:var(--o,.2); animation:tv-sky-drift var(--d,48s) ease-in-out var(--w,0s) infinite alternate;} @keyframes tv-sky-drift{ from{transform:translate3d(0,0,0);} to{transform:translate3d(var(--dx,24px),var(--dy,-32px),0);} } @keyframes tv-sky-twinkle{ 0%,100%{opacity:var(--o,.2);} 50%{opacity:calc(var(--o,.2) * .45);} } .tv-home-sky>i:nth-child(1){left:8%;top:22%;--d:38s;--w:-12s;--dx:24px;--dy:-32px;--o:.24;} .tv-home-sky>i:nth-child(2){left:17%;top:68%;--d:52s;--w:-40s;--dx:-18px;--dy:-36px;--o:.18;width:1.5px;height:1.5px;} .tv-home-sky>i:nth-child(3){left:27%;top:14%;--d:46s;--w:-5s;--dx:30px;--dy:20px;--o:.16;} .tv-home-sky>i:nth-child(4){left:36%;top:84%;--d:60s;--w:-52s;--dx:-24px;--dy:-28px;--o:.2;width:1.5px;height:1.5px;} .tv-home-sky>i:nth-child(5){left:47%;top:6%;--d:42s;--w:-30s;--dx:-18px;--dy:28px;--o:.16;} .tv-home-sky>i:nth-child(6){left:58%;top:90%;--d:50s;--w:-18s;--dx:22px;--dy:-32px;--o:.18;background:var(--accent);} .tv-home-sky>i:nth-child(7){left:68%;top:18%;--d:56s;--w:-60s;--dx:-26px;--dy:18px;--o:.24;width:1.5px;height:1.5px;} .tv-home-sky>i:nth-child(8){left:77%;top:56%;--d:40s;--w:-24s;--dx:18px;--dy:-28px;--o:.16;} .tv-home-sky>i:nth-child(9){left:86%;top:30%;--d:48s;--w:-44s;--dx:-24px;--dy:-22px;--o:.22;} .tv-home-sky>i:nth-child(10){left:93%;top:76%;--d:54s;--w:-8s;--dx:-14px;--dy:-36px;--o:.16;width:1.5px;height:1.5px;} .tv-home-sky>i:nth-child(11){left:4%;top:48%;--d:64s;--w:-36s;--dx:24px;--dy:12px;--o:.16;background:var(--accent);} .tv-home-sky>i:nth-child(12){left:52%;top:40%;--d:58s;--w:-66s;--dx:16px;--dy:-24px;--o:.12;width:1px;height:1px;} .tv-home-sky>i:nth-child(13){left:12%;top:88%;--d:44s;--w:-21s;--dx:20px;--dy:-26px;--o:.18;width:1px;height:1px;} .tv-home-sky>i:nth-child(14){left:81%;top:8%;--d:62s;--w:-47s;--dx:-20px;--dy:24px;--o:.2;} .tv-home-sky>i:nth-child(15){left:96%;top:12%;--d:32s;--w:-17s;--dx:-16px;--dy:20px;--o:.14;width:1px;height:1px;} .tv-home-sky>i:nth-child(16){left:24%;top:94%;--d:54s;--w:-33s;--dx:28px;--dy:-18px;--o:.16;width:1.5px;height:1.5px;} .tv-home-sky>i:is(:nth-child(3),:nth-child(7),:nth-child(14)){animation:tv-sky-drift var(--d) ease-in-out var(--w) infinite alternate,tv-sky-twinkle 12s ease-in-out var(--w) infinite;} @media (prefers-reduced-motion:reduce){.tv-page--home .tv-home-sky>i{animation:none;opacity:var(--o,.2);}} /* Product showcase: copy and a plain feature list beside the app. The list is text with an icon, not cards. The frame holds a screenshot of the real app (16:10, contained without cropping); until one is supplied it shows a neutral placeholder. */ .tv-page--home>.tv-home-showcase{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:48px;} .tv-home-showcase-copy h2{font-size:30px;line-height:37px;font-weight:650;letter-spacing:-.025em;text-wrap:balance;} .tv-home-showcase-copy>p{max-width:44ch;margin:14px 0 0;color:var(--text-2);font-size:16px;line-height:25px;text-wrap:pretty;} .tv-home-features{display:flex;flex-direction:column;gap:14px;margin:28px 0 0;padding:0;list-style:none;} .tv-home-features li{display:flex;align-items:flex-start;gap:12px;color:var(--text);font-size:15px;line-height:22px;} .tv-home-features li[data-icon]:not([data-icon-hydrated="true"])::before{content:"";width:18px;height:18px;flex:none;} .tv-home-features .app-icon{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent);} .tv-home-features small{margin-left:6px;color:var(--text-3);font-size:12.5px;white-space:nowrap;} .tv-home-shot{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-surface-1);} .tv-home-shot>picture{display:contents;} .tv-home-shot img{display:block;width:100%;height:100%;object-fit:contain;} .tv-home-shot.is-placeholder{display:grid;place-items:center;} .tv-home-shot-empty{display:inline-flex;align-items:center;gap:8px;color:var(--text-3);font-size:13px;line-height:18px;} .tv-home-shot-empty .app-icon{width:16px;height:16px;} /* How it works: three equal, quiet cards: icon, title, one line, and a small step number. Lighter than the plan cards below. */ .tv-home-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:0;padding:0;list-style:none;counter-reset:tv-step;} .tv-home-flow>li{position:relative;display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid var(--border-default);border-radius:16px;background:var(--bg-surface-1);counter-increment:tv-step;} .tv-home-flow>li::after{content:"Step " counter(tv-step);position:absolute;top:24px;right:24px;color:var(--text-3);font-size:12px;font-weight:500;line-height:20px;} .tv-home-flow-next{position:absolute;top:50%;right:-27px;display:flex;width:16px;height:16px;transform:translateY(-50%);color:var(--text-3);pointer-events:none;} .tv-home-flow-next .app-icon{width:16px;height:16px;} .tv-home-flow-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:20px;border-radius:12px;background:var(--accent-soft);color:var(--accent);} .tv-home-flow-icon .app-icon{width:20px;height:20px;} .tv-home-flow h3{font-size:16px;line-height:22px;font-weight:600;letter-spacing:-.01em;} .tv-home-flow p{margin:6px 0 0;color:var(--text-2);font-size:14.5px;line-height:22px;} /* Pricing: four equal cards on desktop, two on tablets, stacked on phones. Name, price, the facts that differ, then the button on the card's bottom edge. */ .tv-page--home>.tv-home-pricing{container:homepage-pricing / inline-size;} .tv-pricing.tv-pricing--home{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:20px;margin:0;padding:0;overflow:visible;} .tv-pricing--home .tv-plan{padding:24px;} @container homepage-pricing (min-width:1160px){ .tv-pricing.tv-pricing--home{grid-template-columns:repeat(4,minmax(0,1fr));} .tv-pricing--home .tv-plan{padding:28px;} } .tv-pricing--home .tv-plan-price{margin-top:14px;} .tv-pricing--home .tv-plan-price strong{font-size:36px;line-height:40px;} .tv-pricing--home .tv-plan-price span{font-size:12px;} .tv-pricing--home .tv-plan-list{margin:20px 0 24px;padding-top:16px;} .tv-pricing--home .tv-plan-list li{gap:10px;padding:5px 0;font-size:14px;line-height:21px;} .tv-pricing--home .tv-plan-list .app-icon,.tv-pricing--home .tv-plan.is-featured .tv-plan-list .app-icon{color:var(--text-2);} .tv-pricing--home .tv-plan>.tv-btn{order:5;margin-top:auto;height:44px;min-height:44px;border-radius:var(--radius-control);background:var(--bg-selected);color:var(--text);} .tv-pricing--home .tv-plan>.tv-btn:hover{background:var(--border-hover);} .tv-pricing--home .tv-plan.is-featured>.tv-btn{background:var(--accent);color:var(--on-light);} .tv-pricing--home .tv-plan.is-featured>.tv-btn:hover{background:var(--accent-2);} .tv-page--home .tv-pricing-foot{margin-top:24px;} /* Override the shared readable-width FAQ rule: on Home it should span the same page column as the pricing cards. */ .tv-page--home .tv-faq>:is(.tv-section-head,.tv-disclose){width:100%;max-width:none;} @media (max-width:1199px){ .tv-home-showcase-copy h2{font-size:26px;line-height:32px;} } @media (max-width:1023px){ .tv-page--home .tv-home-hero{padding:56px var(--gutter) 40px;} .tv-page--home .tv-home-hero h1{font-size:50px;} .tv-page--home>.tv-section{padding-top:80px;} .tv-page--home>.tv-hero+.tv-section{padding-top:64px;} /* Tablets: the showcase stacks, copy over the screenshot. */ .tv-page--home>.tv-home-showcase{grid-template-columns:minmax(0,1fr);gap:32px;} .tv-home-flow>li{padding:20px;} .tv-home-flow>li::after{top:20px;right:20px;} } @media (max-width:767px){ .tv-page--home{padding-bottom:56px;} .tv-page--home>.tv-section{padding:64px var(--gutter) 0;} .tv-page--home>.tv-hero+.tv-section{padding-top:48px;} .tv-page--home .tv-section-head{margin-bottom:18px;} .tv-page--home .tv-section-head h2{font-size:21px;line-height:27px;} .tv-page--home .tv-section-lede{margin:-10px 0 20px;font-size:14.5px;line-height:22px;} /* Hero: headline, one line of copy, the field and its button within the first screen; the product starts right below. */ .tv-page--home .tv-home-hero{padding:28px 16px 28px;} /* Two lines at every phone width: the longer line ("Saved automatically.") is sized to fit the column. */ .tv-page--home .tv-home-hero h1{font-size:clamp(28px,8.9vw,44px);line-height:1.08;letter-spacing:-.035em;} .tv-page--home .tv-home-hero>p{margin-top:12px;font-size:15.5px;line-height:23px;} .tv-page--home .tv-universal{margin-top:22px;gap:8px;} .tv-home-sky>i:nth-child(n+9){display:none;} /* The field on one row, the button full width under it. */ :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:54px 48px;align-items:center;gap:8px 0;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field::before{content:"";position:absolute;left:0;right:0;top:0;height:54px;border:1px solid var(--border-panel);border-radius:14px;background:var(--bg-surface-2);pointer-events:none;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field:hover::before{border-color:var(--border-strong);} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field:focus-within{border-color:transparent;box-shadow:none;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field:focus-within::before{border-color:var(--accent-line);box-shadow:var(--focus);} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field>.tv-field-icon{grid-column:1;grid-row:1;z-index:1;width:36px;height:54px;margin-left:8px;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field>input{grid-column:2;grid-row:1;z-index:1;width:100%;height:54px;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-paste{grid-column:3;grid-row:1;z-index:1;height:44px;margin-right:5px;padding:0 10px;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-field>.tv-universal-submit{grid-column:1/-1;grid-row:2;width:100%;height:48px;min-height:48px;justify-content:center;} .tv-page--home .tv-universal-benefits{display:flex;justify-content:center;gap:8px 16px;margin-top:18px;} .tv-page--home .tv-universal-benefits li{flex-direction:row;gap:6px;font-size:12.5px;line-height:18px;text-align:left;} .tv-page--home .tv-universal-benefits li[data-icon]:not([data-icon-hydrated="true"])::before{width:14px;height:14px;} .tv-page--home .tv-universal-benefits .app-icon{width:14px;height:14px;} /* Showcase: headline, copy, features, then the screenshot. */ .tv-page--home>.tv-home-showcase{gap:28px;} .tv-home-showcase-copy h2{font-size:24px;line-height:30px;} .tv-home-showcase-copy>p{margin-top:10px;font-size:15px;line-height:23px;} .tv-home-features{gap:12px;margin-top:22px;} .tv-home-features li{font-size:14.5px;} .tv-home-shot{border-radius:16px;} /* Steps: stacked cards, icon beside the copy. */ .tv-home-flow{grid-template-columns:minmax(0,1fr);gap:10px;} .tv-home-flow-next{display:none;} .tv-home-flow>li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 18px;} .tv-home-flow>li::after{top:16px;right:18px;} .tv-home-flow-icon{grid-row:1 / span 2;margin:0;} .tv-home-flow h3{padding-right:52px;} .tv-home-flow p{margin-top:2px;font-size:14px;line-height:21px;} /* Pricing: full-width stacked cards; Pro keeps its border and badge. */ .tv-pricing.tv-pricing--home{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:12px;} /* Name and price share the first row, so four cards stay short. */ .tv-pricing--home .tv-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:20px;} .tv-pricing--home .tv-plan-top{grid-column:1;grid-row:1;justify-content:flex-start;} .tv-pricing--home .tv-plan-price{grid-column:2;grid-row:1;margin:0;} .tv-pricing--home .tv-plan-price strong{font-size:28px;line-height:36px;} .tv-pricing--home .tv-plan-list{grid-column:1/-1;margin:14px 0 18px;padding-top:10px;} .tv-pricing--home .tv-plan>.tv-btn{grid-column:1/-1;} } @media (max-width:359px){ /* Keep Best Value intact when the name and price share a narrow row. */ .tv-pricing--home .tv-plan-top{align-self:start;flex-wrap:wrap;row-gap:4px;} .tv-pricing--home .plan-tier-badge{flex-shrink:0;white-space:nowrap;} .tv-pricing--home .tv-plan-price{align-self:start;} .tv-page--home .tv-universal-benefits{gap:8px 12px;} .tv-page--home .tv-universal-benefits li{gap:5px;font-size:12px;} :is(.tv-page--home,.tv-page--seo,.tv-guide-tool,.tv-page--search) .tv-universal-paste{font-size:0;gap:0;padding:0 12px;} } /* Plain three-step "how it works" rows (.tv-home-steps), shared by the tool and SEO pages: icon, title and one line under a hairline. The homepage uses its own step cards (.tv-home-flow). */ .tv-home-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:12px 0 0;padding:0;list-style:none;} .tv-home-steps li{display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:18px;border-top:1px solid var(--border-default);} .tv-home-step-icon{display:inline-flex;margin-bottom:6px;color:var(--accent);} .tv-home-step-icon .app-icon{width:20px;height:20px;} .tv-home-steps h3{font-size:16px;line-height:22px;font-weight:600;letter-spacing:-.01em;} .tv-home-steps p{max-width:34ch;color:var(--text-2);font-size:14.5px;line-height:22px;} @media (max-width:767px){ .tv-home-steps{grid-template-columns:minmax(0,1fr);gap:0;} .tv-home-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;row-gap:2px;padding:16px 0;} .tv-home-steps li:last-child{border-bottom:1px solid var(--border-default);} .tv-home-step-icon{grid-row:1 / span 2;margin:1px 0 0;} .tv-home-steps p{max-width:none;font-size:14px;line-height:21px;} } /* 14 ─ Stories The Stories page (main.tv-page--stories) and its viewer. Story tiles are a Stories-only card variant (.lib-card--story), so the Vault and the other pages that share .lib-card keep their own look. */ /* Grid: about six across on a laptop, never more than six on a wide screen (the tiles grow instead), two on phones. */ :is(.tv-page--stories,.tv-page--search) :is(.story-library-grid,.lib-skeleton-grid){grid-template-columns:repeat(auto-fill,minmax(max(176px,calc((100% - 5 * 12px) / 6)),1fr));gap:12px;} .tv-page--stories .lib-skeleton-tile{aspect-ratio:9/16;border-radius:var(--radius-md);} .tv-page--stories .story-append-skeleton{margin-top:12px;} .tv-page--stories .story-append-skeleton:not(.is-initial)>.lib-skeleton-tile:nth-child(n+7){display:none;} .tv-page--stories .story-append-skeleton.is-initial{margin-top:0;} @media (prefers-reduced-motion:reduce){.tv-page--stories :is(.lib-skeleton-tile,.skeleton){animation:none;}} /* Tile. Shared by the Vault (.lib-card--vault), which wears the same tile. */ :is(.lib-card--story,.lib-card--vault)>.lib-tile{border:0;border-radius:var(--radius-md);background:var(--bg-surface-1);} :is(.lib-card--story,.lib-card--vault)>.lib-tile::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none;transition:box-shadow .15s;} :is(.lib-card--story,.lib-card--vault):hover>.lib-tile::after,:is(.lib-card--story,.lib-card--vault):focus-within>.lib-tile::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);} :is(.lib-card--story,.lib-card--vault)>.lib-tile:focus-visible{outline:3px solid rgba(165,166,255,.9);outline-offset:3px;} :is(.lib-card--story,.lib-card--vault) .lib-scrim{height:40%;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,0));} :is(.lib-card--story,.lib-card--vault) .story-tile-topscrim{position:absolute;left:0;right:0;top:0;height:22%;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,0));} :is(.lib-card--story,.lib-card--vault) .story-tile-parts{position:absolute;top:8px;left:10px;right:10px;z-index:1;display:flex;gap:3px;} :is(.lib-card--story,.lib-card--vault) .story-tile-parts>i{flex:1 1 0;height:2.5px;border-radius:2px;background:rgba(255,255,255,.62);} :is(.lib-card--story,.lib-card--vault) .lib-corner{top:10px;left:10px;} :is(.lib-card--story,.lib-card--vault).has-parts .lib-corner{top:18px;} :is(.lib-card--story,.lib-card--vault) .lib-mark-saved{width:22px;height:22px;background:#f6f5f4;color:#181818;box-shadow:0 1px 3px rgba(0,0,0,.35);} :is(.lib-card--story,.lib-card--vault) .lib-mark-saved .app-icon{width:13px;height:13px;stroke-width:2.6;} :is(.lib-card--story,.lib-card--vault) .story-media-placeholder{background:var(--bg-surface-1);color:var(--text-3);font-size:12px;} :is(.lib-card--story,.lib-card--vault) .story-media-placeholder .app-icon{width:22px;height:22px;} :is(.lib-card--story,.lib-card--vault) .media-play-icon{width:48px;height:48px;border:0;background:rgba(18,18,18,.72);} :is(.lib-card--story,.lib-card--vault) .media-play-icon .app-icon{width:20px;height:20px;fill:currentColor;} @media (hover:none){:is(.lib-card--story,.lib-card--vault) .media-play-icon{opacity:0;}} /* Caption: who bottom left, the type and the time bottom right. */ :is(.lib-card--story,.lib-card--vault)>.lib-meta{z-index:3;padding:0 10px 10px;gap:6px;} :is(.lib-card--story,.lib-card--vault) .lib-meta-row strong{font-size:12.5px;font-weight:600;color:#fff;} :is(.lib-card--story,.lib-card--vault) .lib-meta-row .story-tile-when{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:rgba(255,255,255,.9);font-size:12.5px;font-weight:500;} :is(.lib-card--story,.lib-card--vault) .story-tile-when time{color:inherit;font-size:inherit;} :is(.lib-card--story,.lib-card--vault) .story-tile-glyph{width:12px;height:12px;flex:none;} :is(.lib-card--story,.lib-card--vault) svg.story-tile-glyph{stroke-width:2;} /* Stories only: the Recent feed's creator face, and the "Active" pill on a Story still inside TikTok's 24-hour window. The Vault shows neither: it is a collection, not a feed. */ .lib-card--story .lib-meta-row .story-feed-who{display:inline-flex;align-items:center;gap:6px;min-width:0;} .lib-card--story .lib-meta-row .story-feed-who>span{overflow:hidden;text-overflow:ellipsis;color:inherit;font-size:inherit;} .lib-card--story .story-feed-avatar{display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:999px;object-fit:cover;background:var(--surface-3);color:#fff;font-size:10px;box-shadow:0 0 0 1px rgba(255,255,255,.35);} .lib-card--story .story-active-badge{display:inline-flex;align-items:center;gap:5px;font-weight:600;} .lib-card--story .story-active-badge::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--ok);} /* Progress, as a small dark pill above the caption. */ :is(.lib-card--story,.lib-card--vault) .lib-status{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--radius-pill);background:rgba(18,18,18,.78);color:#fff;font-size:11.5px;font-weight:600;line-height:22px;} :is(.lib-card--story,.lib-card--vault) .lib-status:empty{display:none;} /* Hover actions: two round buttons top right, no blur. */ :is(.lib-card--story,.lib-card--vault)>.lib-actions{top:10px;right:10px;z-index:4;gap:6px;} :is(.lib-card--story,.lib-card--vault).has-parts>.lib-actions{top:18px;} :is(.lib-card--story,.lib-card--vault)>.lib-actions>.lib-ib{width:32px;height:32px;background:rgba(18,18,18,.72);color:#f6f5f4;-webkit-backdrop-filter:none;backdrop-filter:none;} :is(.lib-card--story,.lib-card--vault)>.lib-actions>.lib-ib:hover{background:rgba(18,18,18,.92);} :is(.lib-card--story,.lib-card--vault)>.lib-actions>.lib-ib.is-saved,:is(.lib-card--story,.lib-card--vault)>.lib-actions>.lib-ib.is-saved:disabled{background:#f6f5f4;color:#181818;opacity:1;} :is(.lib-card--story,.lib-card--vault)>.lib-actions>.lib-ib:focus-visible{outline:3px solid rgba(165,166,255,.9);outline-offset:2px;} /* Work in progress: a spinner in place of the icon. */ .tv-page--stories .is-busy>.app-icon,.story-viewer .is-busy>.app-icon{display:none;} .tv-page--stories .is-busy::before,.story-viewer .is-busy::before{content:"";width:16px;height:16px;flex:none;border-radius:999px;border:2px solid currentColor;border-right-color:transparent;animation:tvSpin .8s linear infinite;} :is(.lib-card--story,.lib-card--vault) .lib-ib.is-busy{opacity:1;} /* Phone media cards, Stories and the Vault alike. The hover actions step aside for one ⋮ (.lib-card--story/.lib-card--vault > .lib-card-more) in the tile's top-right corner, independent of the caption, which takes the tile's full width in two lines: who (with a face in the Recent feed), then the type and the time. The ⋮ is a 44px touch target whose own background, clipped to its content box, is the 36px circle: no pseudo-element to centre, no blur, the same in every tile state. Its actions open in the action sheet (.tv-sheet, TikVaultUI.actionSheet). Desktop never shows the ⋮. */ .lib-card-more{display:none;} @media (max-width:767px){ :is(.lib-card--story,.lib-card--vault)>.lib-tile,.tv-page--stories .lib-skeleton-tile,.tv-page--vault .lib-skeleton-tile{border-radius:12px;} :is(.lib-card--story,.lib-card--vault)>.lib-tile{-webkit-tap-highlight-color:transparent;} :is(.lib-card--story,.lib-card--vault)>.lib-tile:active::after{background:rgba(0,0,0,.16);} :is(.lib-card--story,.lib-card--vault)>.lib-actions{display:none;} :is(.lib-card--story,.lib-card--vault)>.lib-card-more{position:absolute;top:6px;right:6px;z-index:4;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:4px; border:0;border-radius:999px;background:rgba(18,18,18,.62);background-clip:content-box;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none; -webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation;} :is(.lib-card--story,.lib-card--vault).has-parts>.lib-card-more{top:14px;} :is(.lib-card--story,.lib-card--vault)>.lib-card-more .app-icon{width:18px;height:18px;} :is(.lib-card--story,.lib-card--vault)>.lib-card-more:is(:active,[aria-expanded="true"]){background-color:rgba(18,18,18,.9);} :is(.lib-card--story,.lib-card--vault)>.lib-card-more:focus-visible{outline:3px solid rgba(165,166,255,.9);outline-offset:-4px;} .tv-page--vault #vaultItems.is-selecting .lib-card-more{display:none;} /* The marks top left sit on the ⋮'s centre line. */ :is(.lib-card--story,.lib-card--vault) .lib-corner{top:17px;left:10px;} :is(.lib-card--story,.lib-card--vault).has-parts .lib-corner{top:25px;} :is(.lib-card--story,.lib-card--vault) .lib-corner .lib-parts{background:rgba(18,18,18,.62);-webkit-backdrop-filter:none;backdrop-filter:none;} /* A light gradient sized to the caption, not to the tile, so text stays readable over very bright media without a dark block over the rest. */ :is(.lib-card--story,.lib-card--vault) .lib-scrim{height:min(124px,60%);background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.55) 44px,rgba(0,0,0,.2) 84px,rgba(0,0,0,0));} /* Caption: two lines across the tile's full width. */ :is(.lib-card--story,.lib-card--vault)>.lib-meta{padding:0 10px 10px;gap:6px;} :is(.lib-card--story,.lib-card--vault)>.lib-meta>.lib-meta-row{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;min-height:0;} :is(.lib-card--story,.lib-card--vault) .lib-meta-row>:is(strong,.vault-creator-link){display:block;max-width:100%;min-width:0;overflow:hidden;font-size:13px;line-height:18px;font-weight:600; text-overflow:ellipsis;white-space:nowrap;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);} .lib-card--story .lib-meta-row>.story-feed-who{display:flex;align-items:center;gap:6px;} .lib-card--story .story-feed-avatar{width:24px;height:24px;font-size:11px;font-weight:600;} :is(.lib-card--story,.lib-card--vault) .lib-meta-row .story-tile-when{max-width:100%;margin-left:0;gap:5px;overflow:hidden;color:rgba(255,255,255,.84);font-size:12px;line-height:16px;font-weight:500; white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6);} :is(.lib-card--story,.lib-card--vault) .lib-meta-row .story-tile-when time{overflow:hidden;text-overflow:ellipsis;} } /* The action sheet: a modal along the bottom of the screen. */ html.tv-sheet-open,html.tv-sheet-open body{overflow:hidden;overscroll-behavior:none;} .tv-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:calc(100dvh - 24px);margin:0;padding:0;border:0;background:transparent;color:var(--text);overflow:visible;} .tv-sheet::backdrop{background:var(--scrim);} .tv-sheet-panel{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:8px 16px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--bg-card);animation:tvSheetUp .18s ease;} .tv-sheet-handle{flex:none;width:36px;height:4px;margin:0 auto 12px;border-radius:999px;background:var(--border-hover);} .tv-sheet-head{display:flex;align-items:center;gap:12px;margin:0 0 6px;padding:0 4px 12px;border-bottom:1px solid var(--line);} .tv-sheet-thumb{position:relative;display:block;flex:none;width:40px;height:71px;overflow:hidden;border-radius:8px;background:var(--bg-surface-1);} .tv-sheet-thumb :is(img,.story-tile-state,.story-media-placeholder,.vault-card-placeholder){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tv-sheet-thumb :is(.story-media-placeholder,.vault-card-placeholder){padding:0;gap:0;font-size:0;} .tv-sheet-thumb .story-media-placeholder .app-icon{width:14px;height:14px;} .tv-sheet-thumb .media-play-icon{display:none;} .tv-sheet-who{display:flex;flex-direction:column;gap:2px;min-width:0;} .tv-sheet-who h2{margin:0;overflow:hidden;color:var(--text);font-size:15px;line-height:20px;font-weight:600;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;} .tv-sheet-who p{margin:0;overflow:hidden;color:var(--text-2);font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;} .tv-sheet-actions{display:flex;flex-direction:column;} .tv-sheet-actions hr{margin:6px 4px;border:0;border-top:1px solid var(--line);} .tv-sheet-action{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--text);font:inherit;font-size:15px; text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;} .tv-sheet-action .app-icon{width:20px;height:20px;flex:none;color:var(--text-2);} .tv-sheet-action:is(:hover,:active):not(:disabled){background:var(--hover);} .tv-sheet-action:focus-visible,.tv-sheet-cancel:focus-visible{outline:3px solid rgba(165,166,255,.9);outline-offset:-3px;} .tv-sheet-action:disabled{opacity:.5;cursor:default;} .tv-sheet-action.is-destructive,.tv-sheet-action.is-destructive .app-icon{color:var(--err);} .tv-sheet-cancel{flex:none;width:100%;height:48px;min-height:48px;margin-top:10px;border:0;border-radius:var(--radius-pill);background:var(--bg-selected);color:var(--text);font:inherit;font-size:15px;font-weight:600; cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;} .tv-sheet-cancel:is(:hover,:active){background:var(--border-hover);} @keyframes tvSheetUp{from{transform:translateY(16px);opacity:.6;}to{transform:none;opacity:1;}} @media (prefers-reduced-motion:reduce){.tv-sheet-panel{animation:none;}} /* Overview header and rail. */ .tv-creator-profile{margin-bottom:20px;} .tv-page--stories #storySubtitle:empty{display:none;} .tv-page--stories .lib-rail{gap:14px;margin:0 -4px 20px;padding:4px;} .tv-page--stories .lib-rail-item{width:68px;gap:8px;border-radius:12px;} .tv-page--stories .lib-rail-item:focus-visible{outline:2px solid rgba(165,166,255,.9);outline-offset:2px;} .tv-page--stories .lib-avatar{display:grid;place-items:center;width:60px;height:60px;} .tv-page--stories .lib-avatar :is(img,.lib-avatar-fallback,.creator-avatar-fallback){width:52px;height:52px;font-size:17px;} .tv-page--stories .lib-avatar.has-new::after{inset:0;border-width:2px;} .tv-page--stories .lib-rail-name{max-width:68px;font-size:12px;line-height:16px;} .tv-page--stories .lib-rail-item.is-paused .lib-avatar :is(img,.lib-avatar-fallback,.creator-avatar-fallback){opacity:.45;} .tv-page--stories .lib-rail-paused{position:absolute;right:3px;bottom:3px;z-index:1;width:14px;height:14px;border:3px solid var(--bg-page);border-radius:999px;background:#FBBF24;} .tv-page--stories .lib-rail.is-loading .lib-avatar{width:52px;height:52px;margin:4px;border-radius:999px;} .tv-page--stories .lib-rail.is-loading .skeleton-line{width:44px;height:8px;border-radius:4px;} /* Toolbar: Recent | By creator on the left, search on the right. */ .tv-page--stories #storyOverviewFilters{margin-bottom:12px;} .tv-page--stories #storyOverviewTabs{padding:4px;border-radius:12px;} .tv-page--stories #storyOverviewTabs .lib-tab{height:36px;border-radius:9px;} .tv-page--stories #storyOverviewTabs .lib-tab:focus-visible,.tv-creator-type-tabs .lib-tab:focus-visible{outline:2px solid rgba(165,166,255,.9);outline-offset:1px;} .tv-page--stories .lib-count:empty{display:none;} .tv-page--stories .lib-search{width:280px;} .tv-page--stories .lib-search input{padding-right:40px;} .tv-page--stories .lib-search input:focus-visible{border-color:rgba(165,166,255,.9);box-shadow:0 0 0 1px rgba(165,166,255,.9);} .tv-page--stories .lib-search input::-webkit-search-cancel-button{display:none;} .story-search-clear{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:none;color:var(--text-2);transform:translateY(-50%);cursor:pointer;} .story-search-clear:hover{background:var(--hover);color:var(--text);} .story-search-clear[hidden]{display:none;} .tv-page--stories .lib-search .story-search-clear .app-icon{position:static;transform:none;width:16px;height:16px;color:inherit;} .story-search-toggle{display:none;} #storyOverviewFilters.is-loading>*{visibility:hidden;} #storyOverviewFilters.is-loading{position:relative;} #storyOverviewFilters.is-loading::before,#storyOverviewFilters.is-loading::after{content:"";position:absolute;top:0;height:44px;border-radius:12px;background:var(--surface-2);animation:tvPulse 1.6s ease-in-out infinite;} #storyOverviewFilters.is-loading::before{left:0;width:220px;} #storyOverviewFilters.is-loading::after{right:0;width:280px;} @media (prefers-reduced-motion:reduce){#storyOverviewFilters.is-loading::before,#storyOverviewFilters.is-loading::after{animation:none;}} .tv-page--stories .story-recent{margin-bottom:24px;} .tv-page--stories .creator-library-link .app-icon{color:var(--accent);} /* By creator: the Creators page card. */ .tv-page--stories .creator-library-grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;} .tv-page--stories .creator-library-card{gap:0;padding:0;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s;} .tv-page--stories .creator-library-card:focus-visible{outline:3px solid rgba(165,166,255,.9);outline-offset:3px;} .tv-page--stories .creator-library-heading{position:relative;align-items:flex-start;gap:14px;padding:20px 48px 16px 20px;} .tv-page--stories .creator-library-avatar{width:52px;height:52px;font-size:18px;} .tv-page--stories .creator-library-identity{gap:2px;padding-top:2px;} .tv-page--stories .creator-library-identity h2{font-size:15.5px;line-height:21px;font-weight:600;} .tv-page--stories .creator-library-nick{overflow:hidden;color:var(--text-2);font-size:13.5px;line-height:19px;text-overflow:ellipsis;white-space:nowrap;} .tv-page--stories .creator-library-identity .story-status{margin-top:4px;font-size:13px;} .tv-page--stories .creator-library-go{position:absolute;top:20px;right:20px;width:18px;height:18px;color:var(--text-3);transition:color .15s;} .tv-page--stories .creator-library-card:hover .creator-library-go{color:var(--text);} .tv-page--stories .creator-library-previews{gap:6px;padding:0 20px 20px;} .tv-page--stories .creator-library-preview{border-radius:10px;background:var(--bg-surface-1);} .tv-page--stories .creator-library-preview .story-media-placeholder{font-size:11px;} .tv-page--stories .creator-library-preview .story-media-placeholder .app-icon{width:18px;height:18px;} .tv-page--stories .creator-library-preview .media-play-icon{display:none;} .tv-page--stories .creator-library-previews.is-empty{position:relative;} .tv-page--stories .creator-library-slot{display:block;aspect-ratio:9/16;border-radius:10px;background:var(--bg-surface-1);opacity:.5;} .tv-page--stories .creator-library-previews.is-empty .story-creator-empty{position:absolute;inset:0 20px 20px;display:grid;place-items:center;padding:0;} .creator-library-figures{display:grid;grid-template-columns:1fr 1fr;min-height:72px;border-top:1px solid var(--border-card);} .creator-library-figures>.story-figure{padding:14px 20px 16px;} .creator-library-figures>.story-figure+.story-figure{border-left:1px solid var(--border-card);} .creator-library-figures.is-single{grid-template-columns:1fr;} .story-figure{display:flex;flex-direction:column;gap:2px;min-width:0;} .story-figure>strong{overflow:hidden;color:var(--text);font-size:15px;line-height:21px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;} .story-figure>span{overflow:hidden;color:var(--text-2);font-size:12.5px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;} .story-figure--loading>strong{width:90px;height:12px;margin:5px 0;border-radius:4px;background:var(--surface-2);animation:tvPulse 1.6s ease-in-out infinite;} @media (prefers-reduced-motion:reduce){.story-figure--loading>strong{animation:none;}} /* Creator library header. */ .tv-creator-profile.is-creator{align-items:flex-start;} .tv-creator-profile.is-creator .tv-page-head-main{align-items:flex-start;} .tv-creator-profile.is-creator .tv-avatar--lg{width:64px;height:64px;flex:none;} .tv-creator-profile .tv-creator-handle{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:4px 0 0;font-size:14px;line-height:20px;} .tv-creator-profile .tv-creator-handle .story-status{font-size:13.5px;} .tv-creator-profile.is-creator :is(h1,h2){font-size:26px;line-height:32px;letter-spacing:-.02em;} .tv-creator-profile .tv-creator-handle .story-nick{min-width:0;max-width:100%;overflow:hidden;color:var(--text-2);text-overflow:ellipsis;white-space:nowrap;} .story-figures{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:10px 0 0;} .story-figures[hidden]{display:none;} .story-figures>.story-figure{flex-direction:row;align-items:baseline;gap:5px;padding:0;} .story-figures>.story-figure>strong{font-size:13px;line-height:20px;} .story-figures>.story-figure--last>span{font-size:13px;line-height:20px;} .story-figures>.story-figure+.story-figure::before{content:"·";align-self:center;margin-right:7px;color:var(--text-3);} .tv-creator-profile .tv-page-actions .story-manage{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;} .story-content-toolbar{display:flex;align-items:center;gap:12px;margin:0 0 16px;box-shadow:inset 0 -1px 0 var(--border-card);} .story-content-toolbar:has(#creatorTabs[hidden]){display:none;} .story-content-toolbar .tv-creator-content-tabs{flex:1;min-width:0;width:auto;margin:0;box-shadow:none;} .story-content-toolbar #creatorTabs .lib-tab{flex:none;padding:0;} .story-filter-menu{position:relative;flex:none;margin:0 0 2px;} .story-filter-menu[hidden]{display:none;} .story-filter-menu>summary{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;list-style:none;color:var(--text-2);cursor:pointer;} .story-filter-menu>summary::-webkit-details-marker{display:none;} .story-filter-menu>summary:hover,.story-filter-menu[open]>summary{background:var(--hover);color:var(--text);} .story-filter-menu>summary:focus-visible{outline:2px solid rgba(165,166,255,.9);outline-offset:-2px;} .story-filter-menu>summary.is-active::after{content:"";position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:var(--accent);} .story-filter-panel{position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:260px;max-width:calc(100vw - 32px);padding:16px;border:1px solid var(--border-card);border-radius:14px;background:var(--bg-card);box-shadow:0 12px 36px rgba(0,0,0,.3);} .story-filter-label{display:block;margin:0 0 8px;color:var(--text-2);font-size:12px;line-height:18px;font-weight:500;} .story-filter-panel .tv-creator-type-tabs{display:flex;max-width:none;margin:0 0 16px;padding:3px;} .story-filter-panel .tv-creator-type-tabs .lib-tab{flex:1;min-height:44px;padding:0 10px;} .story-filter-panel .lib-filters-end,.story-filter-panel .tv-select{display:block;width:100%;} .story-filter-panel .tv-select select{width:100%;height:44px;font-size:16px;} .story-filter-panel .tv-select::after{top:auto;bottom:18px;} .tv-creator-profile .tv-page-actions{align-items:center;gap:8px;padding-top:12px;} .tv-creator-profile .tv-page-actions .tv-btn{height:40px;min-height:40px;padding:0 16px;} /* Stories | Posts: underline tabs over a full-width hairline. */ .tv-creator-content-tabs{display:flex;gap:24px;width:100%;max-width:none;margin:0 0 16px;padding:0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 var(--border-card);} .tv-creator-content-tabs[hidden]{display:none;} .tv-creator-content-tabs .lib-tab{height:44px;padding:0;border-radius:0;background:none;color:var(--text-muted);font-size:15px;font-weight:600;box-shadow:none;} .tv-creator-content-tabs .lib-tab:hover{color:var(--text);} .tv-creator-content-tabs .lib-tab:is([aria-pressed="true"],[aria-selected="true"]){background:none;color:#f6f5f4;box-shadow:inset 0 -2px 0 #f6f5f4;} .tv-creator-content-tabs .lib-tab:focus-visible{outline:2px solid rgba(165,166,255,.9);outline-offset:-2px;} /* Type controls inside the filter panel. */ .tv-creator-type-tabs{padding:3px;border-radius:12px;} .tv-creator-type-tabs .lib-tab{height:30px;padding:0 14px;border-radius:9px;font-size:13px;} /* Month headings are grid items spanning the row. */ .story-month-head{grid-column:1 / -1;margin:16px 0 0;color:var(--text);font-size:15px;line-height:20px;font-weight:600;} .story-library-grid>.story-month-head:first-child{margin-top:0;} .tv-page--stories .story-history-section{margin:0 0 28px;} .tv-page--stories .library-load-previous{margin:0 auto 16px;} .tv-page--stories .library-load-more .app-icon{width:15px;height:15px;} .tv-page--stories .story-history-status{text-align:center;color:var(--text-2);font-size:13px;} .tv-page--stories .story-history-empty:empty{display:none;} /* Locked history: one compact row under a hairline, one CTA. */ .tv-page--stories .story-locked-section{margin-top:28px;padding-top:28px;border-top:1px solid var(--border-card);} .tv-page--stories .story-library.is-locked-only .story-locked-section{margin-top:0;padding-top:0;border-top:0;} .tv-page--stories .story-library.is-locked-only .story-history-section:not(.story-locked-section){margin:0;} .story-locked-head{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 16px;} .story-locked-copy{min-width:0;} .story-locked-copy h2{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:15px;line-height:20px;font-weight:600;} .story-locked-copy h2 .app-icon{width:16px;height:16px;color:var(--text-2);} .story-locked-count{color:var(--text-3);font-weight:500;} .tv-page--stories .story-history-note{margin:0;color:var(--text-2);font-size:13.5px;line-height:20px;} .tv-page--stories .story-history-cta{flex:none;margin:0;} .tv-page--stories .story-history-cta:empty{display:none;} .tv-page--stories .story-history-upgrade{height:36px;min-height:36px;padding:0 16px;} .story-locked-grid{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;} .story-locked-tile{position:relative;display:flex;flex:0 0 88px;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:88px;aspect-ratio:9/16;padding:8px 4px;border:1px solid #2a2a2b;border-radius:12px;background:#101012;color:var(--text-2);text-align:center;cursor:default;} .story-locked-tile:focus-visible{outline:3px solid rgba(165,166,255,.9);outline-offset:2px;} .story-locked-tile .story-locked-glyph{width:18px;height:18px;color:var(--text-3);} .story-locked-tile .story-locked-date{font-size:12px;line-height:16px;font-weight:500;color:var(--text-2);} .story-locked-tile .story-locked-plan{font-size:11.5px;line-height:14px;color:var(--accent);font-weight:600;} /* Story viewer: the whole screen. */ .story-watch-backdrop{padding:0;background:rgba(8,8,8,.95);-webkit-backdrop-filter:none;backdrop-filter:none;} .story-watch-modal.story-viewer{position:relative;display:block;width:100%;height:100%;max-width:none;max-height:none;overflow:hidden;border:0;border-radius:0;background:none;box-shadow:none;} .story-viewer .story-watch-top{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:28px 32px 0;pointer-events:none;} .story-viewer .story-watch-top>*{pointer-events:auto;} .story-viewer .story-watch-parts--top{display:none;} .story-viewer .story-watch-identity{display:flex;align-items:center;gap:12px;min-width:0;} .story-watch-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;overflow:hidden;border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:15px;font-weight:600;} .story-watch-avatar>*{display:grid;place-items:center;width:100%;height:100%;object-fit:cover;} .story-viewer .story-watch-who{display:flex;flex-direction:column;min-width:0;} .story-viewer .story-watch-who strong{overflow:hidden;color:var(--text);font-size:15px;line-height:20px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;} .story-viewer .story-watch-who>span{overflow:hidden;color:var(--text-2);font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;} .story-viewer .story-watch-part-meta{display:none;} .story-watch-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:var(--bg-card);color:var(--text);cursor:pointer;} .story-watch-close:hover{background:var(--bg-hover);} .story-watch-close .app-icon{width:20px;height:20px;} .story-viewer .story-watch-stage{display:flex;align-items:center;justify-content:center;gap:24px;height:100%;padding:24px 0;} .story-viewer{--story-media-h:min(calc(100dvh - 132px),calc((100vw - 208px) * 16 / 9));} .story-viewer .story-watch-column{display:flex;flex-direction:column;gap:16px;width:calc(var(--story-media-h) * 9 / 16);min-width:0;} .story-viewer .story-watch-frame{position:relative;width:100%;height:var(--story-media-h);overflow:hidden;border-radius:16px;background:#000;} .story-viewer .story-watch-media-wrap{position:absolute;inset:0;min-height:0;background:#000;} .story-viewer .story-watch-media-wrap img,.story-viewer .story-watch-media-wrap video{width:100%;height:100%;max-height:none;object-fit:contain;} .story-watch-parts{display:flex;gap:4px;} .story-watch-parts[hidden]{display:none;} .story-watch-parts>i{flex:1 1 0;height:3px;border-radius:2px;background:rgba(255,255,255,.35);} .story-watch-parts>i.is-done{background:#fff;} .story-viewer .story-watch-parts--media{position:absolute;top:12px;left:12px;right:12px;z-index:1;} .story-viewer .story-watch-status{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:280px;padding:24px;color:var(--text-2);font-size:13.5px;line-height:20px;text-align:center;} .story-viewer .story-watch-status .app-icon{width:28px;height:28px;color:var(--text-3);} .story-watch-spinner{width:24px;height:24px;border-radius:999px;border:2.5px solid rgba(255,255,255,.2);border-top-color:#fff;animation:tvSpin .8s linear infinite;} .story-watch-edge{display:grid;place-items:center;flex:none;width:56px;height:56px;padding:0;border:0;border-radius:999px;background:var(--bg-card);color:var(--text);cursor:pointer;transition:background-color .15s,opacity .15s;} .story-watch-edge:hover:not(:disabled){background:var(--bg-hover);} .story-watch-edge:disabled{opacity:.32;cursor:not-allowed;} .story-watch-edge .app-icon{width:26px;height:26px;} .story-watch-edge.is-loading>.app-icon{display:none;} .story-watch-edge.is-loading::before{content:"";width:22px;height:22px;border-radius:999px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;animation:tvSpin .8s linear infinite;} .story-viewer :is(.story-watch-close,.story-watch-edge,.tv-btn):focus-visible{outline:3px solid rgba(165,166,255,.9);outline-offset:3px;} .story-viewer .story-watch-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:40px;padding:0;color:var(--text-2);font-size:13.5px;} .story-viewer .story-watch-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .story-viewer .story-watch-label.is-ready{color:var(--ok);} .story-viewer .story-viewer-actions{display:flex;gap:8px;flex:none;margin-left:auto;} .story-viewer .story-viewer-actions>.tv-btn{height:40px;min-height:40px;padding:0 16px;font-size:13.5px;} .story-viewer .story-viewer-actions>.tv-btn:disabled{opacity:.45;cursor:not-allowed;} .story-viewer #storyWatchVault[hidden]{display:none;} .story-viewer #storyWatchVault.is-saved:disabled{opacity:1;} .story-viewer .story-viewer-download.is-busy::before{border-color:var(--on-light);border-right-color:transparent;} .story-watch-keys{position:absolute;left:32px;bottom:28px;display:flex;align-items:center;gap:6px;margin:0;color:var(--text-3);font-size:12.5px;} .story-watch-keys kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border:1px solid #353537;border-radius:6px;color:var(--text-2);font:inherit;font-size:12px;} .story-watch-keys kbd+kbd{margin-left:-2px;} .story-watch-keys kbd:not(:first-child):not(:nth-child(2)){margin-left:10px;} @media (pointer:coarse){.story-watch-keys{display:none;}} /* Narrower screens put who and when above the media rather than beside it. */ @media (min-width:768px) and (max-width:1099px){ .story-viewer .story-watch-top{position:relative;padding:20px 24px 0;} .story-viewer .story-watch-stage{height:calc(100% - 64px);padding:16px 0 24px;} .story-viewer{--story-media-h:min(calc(100dvh - 196px),calc((100vw - 208px) * 16 / 9));} } @media (max-width:767px){ /* Two tiles across. The tile, its ⋮ and the action sheet are shared with the Vault ("Phone media cards" above). */ :is(.tv-page--stories,.tv-page--search) :is(.story-library-grid,.lib-skeleton-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .tv-page--stories .lib-skeleton-grid>.lib-skeleton-tile:nth-child(n+5){display:none;} .tv-page--stories .story-append-skeleton:not(.is-initial)>.lib-skeleton-tile:nth-child(n+3){display:none;} /* Overview. */ .tv-page--stories .lib-rail{gap:10px;} .tv-page--stories .lib-rail-item{width:58px;} .tv-page--stories .lib-avatar{width:58px;height:58px;} .tv-page--stories .lib-avatar :is(img,.lib-avatar-fallback,.creator-avatar-fallback){width:50px;height:50px;} .tv-page--stories .lib-rail-name{max-width:58px;} .tv-page--stories #storyOverviewFilters{flex-wrap:wrap;gap:10px;} .tv-page--stories #storyOverviewFilters .lib-filters-end{width:auto;flex:none;} .tv-page--stories #storyOverviewTabs{flex:1 1 auto;} .tv-page--stories #storyOverviewTabs .lib-tab{flex:1 1 0;padding:0 10px;} .story-search-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border-field);border-radius:12px;background:var(--bg-card);color:var(--text-2);cursor:pointer;} .story-search-toggle .app-icon{width:18px;height:18px;} .story-search-toggle[aria-expanded="true"]{color:var(--text);border-color:var(--border-hover);} .tv-page--stories #storySearch{display:none;} .tv-page--stories #storyOverviewFilters.is-searching .lib-filters-end{order:3;flex:1 1 100%;width:100%;} .tv-page--stories #storyOverviewFilters.is-searching .story-search-toggle{display:none;} .tv-page--stories #storyOverviewFilters.is-searching #storySearch{display:flex;width:100%;} #storyOverviewFilters.is-loading::before{width:calc(100% - 54px);} #storyOverviewFilters.is-loading::after{width:44px;} .tv-page--stories .creator-library-grid{grid-template-columns:1fr;gap:12px;} /* Creator library. */ .tv-creator-profile.is-creator .tv-avatar--lg{width:56px;height:56px;} .story-figures>.story-figure{flex:0 1 auto;padding:0;} /* The figures start under the avatar so both fit on one line. */ .tv-creator-profile.is-creator .story-figures{width:calc(100% + 72px);margin-left:-72px;} .tv-creator-profile.is-creator :is(h1,h2){font-size:21px;line-height:27px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .tv-creator-profile.is-creator{position:relative;display:block;} .tv-creator-profile.is-creator .tv-page-head-main{padding-right:96px;} .tv-creator-profile.is-creator .story-figures{width:calc(100% + 168px);} .tv-creator-profile .tv-page-actions{position:absolute;top:0;right:0;gap:4px;width:auto;padding-top:0;} .tv-creator-profile .tv-page-actions .story-open-tiktok{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;} .story-open-tiktok-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .tv-creator-profile .tv-page-actions:has(.tv-btn--primary){position:static;margin-top:12px;} .tv-creator-profile.is-creator:has(.tv-btn--primary) .tv-page-head-main{padding-right:0;} .tv-creator-profile.is-creator:has(.tv-btn--primary) .story-figures{width:calc(100% + 72px);} .tv-creator-type-tabs{flex:1 1 auto;} .tv-creator-type-tabs .lib-tab{flex:1 1 0;padding:0 8px;} .story-locked-head{flex-direction:column;align-items:stretch;} .tv-page--stories .story-history-upgrade{width:100%;height:40px;} .story-locked-tile{flex-basis:76px;width:76px;} /* Viewer: full screen, who and when over the top, actions along the bottom. The media sits between them so a video's controls stay clear. */ .story-viewer .story-watch-top{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"parts parts" "who close";align-items:center;gap:10px 12px;padding:max(8px,env(safe-area-inset-top)) 12px 28px;background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,0));} .story-viewer .story-watch-parts--top{display:flex;grid-area:parts;} .story-viewer .story-watch-parts--top[hidden]{display:none;} .story-viewer .story-watch-parts--media{display:none;} .story-viewer .story-watch-identity{grid-area:who;gap:10px;} .story-viewer .story-watch-close{grid-area:close;background:rgba(24,24,24,.55);} .story-watch-avatar{width:36px;height:36px;} .story-viewer .story-watch-who>span{color:rgba(255,255,255,.75);} .story-viewer #storyWatchMeta{display:inline;} .story-viewer .story-watch-part-meta{display:inline;} .story-viewer .story-watch-stage{position:absolute;inset:0;display:block;padding:0;} .story-viewer .story-watch-column{position:absolute;inset:0;display:block;width:auto;} .story-viewer .story-watch-frame{position:absolute;inset:0 0 var(--story-bar-h,96px);width:auto;height:auto;border-radius:0;} .story-viewer .story-watch-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:1fr 1.15fr;gap:8px 10px;padding:16px 16px max(24px,env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));} .story-viewer .story-watch-label{grid-column:1 / -1;text-align:center;color:#fff;font-size:13px;} .story-viewer .story-watch-label:is(.is-part,:empty){display:none;} .story-viewer .story-viewer-actions{display:contents;} .story-viewer .story-viewer-actions>.tv-btn{width:100%;height:48px;min-height:48px;font-size:15px;} .story-viewer #storyWatchVault[hidden]+.story-viewer-download{grid-column:1 / -1;} .story-viewer .story-watch-edge{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;background:rgba(24,24,24,.55);color:#fff;} .story-viewer .story-watch-prev{left:8px;} .story-viewer .story-watch-next{right:8px;} .story-viewer .story-watch-edge .app-icon{width:22px;height:22px;} .story-watch-keys{display:none;} /* Toasts sit above the bottom bar while the viewer is open. */ body.modal-open:has(.story-watch-backdrop:not([hidden])) .app-toast-stack{bottom:calc(112px + env(safe-area-inset-bottom));} } /* Signed-in Home ───────────────────────────────────────────────────────── Action-first: title with one status line, the universal input, Recent Stories as creator groups (Stories tiles), a compact account strip and recent Vault saves. Notices render only while active. */ .tv-feedback form{display:flex;flex-direction:column;gap:10px;max-width:560px;} .tv-feedback-actions{display:flex;gap:8px;} .tv-feedback{padding:18px 20px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-surface-1);} .tv-page--dash .tv-home-head{margin:0 0 20px;} .tv-home-status{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:20px;margin:6px 0 0;color:var(--text-secondary);font-size:14px;line-height:20px;} .tv-home-status[hidden]{display:none;} .tv-home-status .skeleton-line{width:260px;height:12px;} .tv-home-dot{width:7px;height:7px;flex:none;border-radius:999px;background:var(--ok,#34d399);} .tv-home-status.is-warning .tv-home-dot{background:var(--warn,#fbbf24);} .tv-home-status.is-idle .tv-home-dot{background:var(--text-muted);} .tv-home-sep,.tv-universal-detect-sep{color:var(--text-muted);} .tv-home-warn{color:var(--warn,#fbbf24);} .tv-live-note{display:inline-flex;align-items:center;gap:7px;color:var(--text-secondary);font-size:13px;font-weight:500;} .tv-live-note[hidden]{display:none;} .tv-live-note .lib-dot{width:6px;height:6px;border-radius:999px;background:var(--accent);} .tv-home-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap;} .tv-home-link:hover{color:var(--text-primary);} .tv-home-link .app-icon{width:15px;height:15px;color:var(--accent);} /* Notices */ .tv-page--dash .tv-home-notices{max-width:none;margin:0 0 20px;} .tv-home-notice{min-height:56px;padding:12px 12px 12px 14px;border-radius:16px;background:var(--bg-surface-1);} /* Same 28px tile as the trial notices (assets/trial.css). */ .tv-home-notice>.tv-icon-tile{--tile:28px;border-color:transparent;border-radius:8px;} .tv-home-notice>.tv-icon-tile .app-icon{width:15px;height:15px;} .tv-home-notice .tv-notice-text{font-size:14px;line-height:20px;} /* Title over one quieter line (e.g. the first-Story notice). */ .tv-notice-text--stack{display:flex;flex-direction:column;} .tv-notice-text--stack>span{overflow:hidden;color:var(--text-3);font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;} /* Warnings: an amber icon and a faint amber edge on the usual surface. */ .tv-home-notice.tv-notice--warning{border-color:rgba(251,191,36,.24);} .tv-home-notice.tv-notice--warning>.tv-icon-tile{background:rgba(251,191,36,.12);color:var(--warn,#fbbf24);} .tv-home-notice--success>.tv-icon-tile{background:rgba(52,211,153,.12);color:var(--ok,#34d399);} /* One action as a small filled button, the dismiss X beside it at the same height. */ .tv-home-notice .tv-notice-actions{gap:6px;} .tv-home-notice .tv-notice-actions>.tv-icon-btn{width:32px;height:32px;} /* Universal input: the central control on Home. One box: the leading icon names what the field recognised, Paste sits inside as a quiet control, and the action reads as a button before it is ready (secondary fill) and as the primary once it is (light). Loading keeps the box and puts a spinner in the button; the status line replaces the support line under it. */ .tv-page--dash .tv-home-tool{margin:0 0 40px;} .tv-page--dash .tv-home-tool .tv-universal-field{min-height:64px;gap:4px;padding:8px 8px 8px 16px;border-color:var(--border-field);border-radius:var(--radius-field);background:var(--bg-card);transition:border-color var(--duration-base) ease,box-shadow var(--duration-base) ease;} .tv-page--dash .tv-home-tool .tv-universal-field:hover{border-color:var(--border-hover);} .tv-page--dash .tv-home-tool .tv-universal-field:focus-within{border-color:var(--accent-line);box-shadow:var(--focus);} .tv-page--dash .tv-home-tool .tv-universal-field:has(input[aria-invalid="true"]){border-color:rgba(248,113,113,.55);} .tv-page--dash .tv-home-tool .tv-universal-field:has(input[aria-invalid="true"]):focus-within{box-shadow:0 0 0 3px rgba(248,113,113,.16);} .tv-page--dash .tv-home-tool .tv-universal-field>.tv-field-icon{width:28px;color:var(--text-muted);transition:color var(--duration-base) ease;} .tv-page--dash .tv-home-tool .tv-universal-field>.tv-field-icon .app-icon{width:20px;height:20px;} .tv-page--dash .tv-home-tool .tv-universal-field[data-detected="creator"]>.tv-field-icon,.tv-page--dash .tv-home-tool .tv-universal-field[data-detected="media"]>.tv-field-icon{color:var(--accent);} .tv-page--dash .tv-home-tool .tv-universal-field>input{font-size:16px;padding:0 6px;} .tv-page--dash .tv-home-tool .tv-universal-field>input::placeholder{color:var(--text-muted);} .tv-page--dash .tv-home-tool .tv-universal-paste{height:40px;padding:0 12px;border-radius:10px;color:var(--text-secondary);font-size:13.5px;font-weight:500;transition:background-color var(--duration-base) ease,color var(--duration-base) ease;} .tv-page--dash .tv-home-tool .tv-universal-paste:hover{background:var(--bg-hover);color:var(--text-primary);} .tv-page--dash .tv-home-tool .tv-universal-paste:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} .tv-page--dash .tv-home-tool .tv-universal-paste .app-icon{width:16px;height:16px;} .tv-page--dash .tv-home-tool .tv-universal-field>.tv-universal-submit{height:46px;min-height:46px;min-width:148px;margin-left:4px;padding:0 20px;border-radius:12px;background:var(--bg-selected);color:var(--text-primary);font-size:14.5px;} .tv-page--dash .tv-home-tool .tv-universal-field>.tv-universal-submit:hover{background:var(--border-hover);} .tv-page--dash .tv-home-tool .tv-universal.is-ready:not(.is-loading) .tv-universal-submit{background:var(--text-primary);color:var(--on-light);} .tv-page--dash .tv-home-tool .tv-universal.is-ready:not(.is-loading) .tv-universal-submit:hover{background:var(--primary-hover);} .tv-page--dash .tv-home-tool .tv-universal.is-loading .tv-universal-submit{background:var(--bg-selected);color:var(--text-secondary);cursor:progress;} .tv-page--dash .tv-home-tool .tv-universal.is-loading .tv-universal-submit .app-icon{display:none;} .tv-page--dash .tv-home-tool .tv-universal.is-loading .tv-universal-submit::after{content:"";width:15px;height:15px;flex:none;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:999px;animation:tvSpin .8s linear infinite;} .tv-page--dash .tv-home-tool .tv-universal-support{display:flex;align-items:center;min-height:18px;margin:10px 0 0;padding:0 2px;color:var(--text-muted);font-size:13px;line-height:18px;} .tv-universal-support [hidden]{display:none !important;} .tv-universal-detect{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--text-secondary);} .tv-universal-detect strong{color:var(--text-primary);font-weight:600;} .tv-universal-detect .app-icon{width:15px;height:15px;color:var(--accent);} .tv-universal-note{color:var(--text-secondary);} /* The status line while a request runs: text under the field, not a card; the spinner is in the button. */ .tv-page--dash .tv-home-tool .tv-universal-loading{min-height:18px;padding:0 2px;border:0;border-radius:0;background:none;animation:none;} .tv-page--dash .tv-home-tool .tv-universal-loading .tv-spinner{display:none;} .tv-page--dash .tv-home-tool .tv-universal-loading strong{color:var(--text-secondary);font-size:13px;font-weight:500;line-height:18px;} .tv-page--dash .tv-home-tool .tv-universal-results.is-connected>:not(:empty){margin-top:10px;} /* Sections */ .tv-page--dash .tv-home-section{margin:0 0 40px;} .tv-page--dash .tv-home-section>.tv-section-head{margin:0 0 14px;} .tv-page--dash .tv-home-section>.tv-section-head h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:18px;line-height:24px;font-weight:600;} /* New account */ .tv-home-start{margin:0 0 40px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-surface-1);} .tv-home-start[hidden]{display:none;} .tv-home-start-head{padding:20px 22px 0;} .tv-home-start-head h2{margin:0;font-size:18px;line-height:24px;font-weight:600;} .tv-home-start-head p{margin:4px 0 0;color:var(--text-secondary);font-size:14px;line-height:20px;} .tv-home-start-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--border-card);} .tv-home-start-list li{display:flex;gap:12px;padding:18px 22px 20px;} .tv-home-start-list li+li{border-left:1px solid var(--border-card);} .tv-home-start-list .tv-icon-tile{flex:none;color:var(--text-primary);} .tv-home-start-list strong{display:block;margin:0 0 2px;font-size:14px;line-height:20px;font-weight:600;} .tv-home-start-list p{margin:0;color:var(--text-secondary);font-size:13px;line-height:19px;} /* Actionable start items: the whole cell is the button or link. */ .tv-home-start-list--actions li{padding:0;} .tv-home-start-action{display:flex;gap:12px;width:100%;height:100%;padding:18px 22px 20px;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s;} .tv-home-start-action:hover{background:var(--bg-hover);} .tv-home-start-action:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} .tv-home-start-list--actions li:first-child .tv-home-start-action{border-bottom-left-radius:calc(var(--radius-card) - 1px);} .tv-home-start-list--actions li:last-child .tv-home-start-action{border-bottom-right-radius:calc(var(--radius-card) - 1px);} .tv-home-start-action strong{display:block;margin:0 0 2px;font-size:14px;line-height:20px;font-weight:600;} .tv-home-start-action>span:last-child>span{display:block;color:var(--text-secondary);font-size:13px;line-height:19px;} .tv-home-start-action .tv-icon-tile{flex:none;color:var(--text-primary);} /* Home's Monitoring list: one row per creator -- avatar, @name over the shared status, the Story count on the right. */ .tv-home-monitor{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-surface-1);overflow:hidden;} .tv-home-monitor>li+li{border-top:1px solid var(--border-card);} .tv-home-monitor-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;color:inherit;text-decoration:none;transition:background-color .15s;} .tv-home-monitor-row:hover{background:var(--bg-hover);} .tv-home-monitor-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} .tv-home-monitor-who{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;} .tv-home-monitor-who>strong{overflow:hidden;font-size:14px;font-weight:600;line-height:20px;text-overflow:ellipsis;white-space:nowrap;} .tv-home-monitor-who .tv-monitor-status{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 10px;} .tv-home-monitor-who .tv-monitor-status-detail{padding-left:0;} .tv-home-monitor-count{flex:none;color:var(--text-2);font-size:13px;line-height:18px;white-space:nowrap;} .tv-home-monitor-more{display:block;padding:12px 16px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;} .tv-home-monitor-more:hover{color:var(--text);background:var(--bg-hover);} .tv-home-monitor-note{margin:10px 2px 0;color:var(--text-3);font-size:12.5px;line-height:18px;} /* Recent Stories: up to three creators, three newest each */ .tv-home-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px;} .tv-home-group{min-width:0;} .tv-home-group-head{display:flex;align-items:center;gap:10px;min-height:32px;margin:0 0 10px;color:inherit;text-decoration:none;} .tv-home-group-head .tv-avatar{flex:none;} .tv-home-group-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;} a.tv-home-group-head:hover .tv-home-group-name{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3);} .tv-home-paused{display:inline-flex;align-items:center;gap:6px;flex:none;color:var(--warn,#fbbf24);font-size:12.5px;font-weight:500;} .tv-home-paused::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor;} .tv-home-group-when{margin-left:auto;flex:none;color:var(--text-muted);font-size:12.5px;} .tv-home-group-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;} /* Recently saved: one row of the newest Vault saves, media first. */ .tv-home-saves{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;} .tv-home-save{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:var(--radius-md);background:var(--bg-surface-2);} .tv-home-save>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tv-home-save-who{position:absolute;left:8px;right:8px;bottom:7px;overflow:hidden;color:#fff;font-size:12px;font-weight:600;line-height:16px;text-overflow:ellipsis;white-space:nowrap;} .tv-home-save:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} @container home (max-width:640px){ .tv-home-saves{grid-template-columns:repeat(3,minmax(0,1fr));} .tv-home-saves>:nth-child(n+4){display:none;} } .tv-home-group-tiles .lib-skeleton-tile{aspect-ratio:9/16;border-radius:var(--radius-md);} .tv-home-sk-avatar{width:28px;height:28px;flex:none;border-radius:999px;} .tv-page--dash .lib-card--story>.lib-meta{padding:0 9px 9px;} .tv-page--dash .lib-card--story .lib-meta-row .story-tile-when{margin-left:0;font-size:12px;} .tv-home-error{display:flex;align-items:center;gap:14px;padding:18px 20px;text-align:left;} .tv-home-error>.app-icon{width:24px;height:24px;flex:none;color:var(--text-muted);} .tv-home-error>div{flex:1;min-width:0;} .tv-home-error h3{margin:0;} /* Your account: one strip of four figures */ .tv-home-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.8fr);margin:0;padding:0;list-style:none;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-surface-1);overflow:hidden;} .tv-home-overview li{display:flex;min-width:0;} .tv-home-overview li[hidden]{display:none;} .tv-home-overview li+li{border-left:1px solid var(--border-card);} .tv-home-overview a{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0;padding:18px 20px;color:inherit;text-decoration:none;transition:background-color var(--duration-base) ease;} .tv-home-overview a:hover{background:var(--bg-surface-2);} .tv-home-overview a:hover .tv-home-fig-label{color:var(--text-primary);} /* The strip clips its corners, so the focus ring sits inside each figure. */ .tv-home-overview a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} .tv-home-fig-label{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:var(--text-secondary);font-size:13px;font-weight:500;} .tv-home-fig-icon{display:inline-flex;color:var(--text-muted);} /* The plan is the way to upgrade: the same gold as Upgrade in the side panel. */ #planFigure .tv-home-fig-icon{color:var(--gold);} .tv-home-fig-icon .app-icon{width:16px;height:16px;} .tv-home-overview .tv-strip-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;} .tv-home-overview .tv-strip-value .skeleton-value{display:inline-block;width:72px;height:18px;vertical-align:-2px;} .tv-home-overview .has-error .tv-strip-value{color:var(--text-muted);} #planFigure .tv-strip-value{font-size:17px;} .tv-home-overview .tv-strip-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:13px;line-height:18px;font-variant-numeric:tabular-nums;} #planFigure .tv-strip-note{color:var(--text-secondary);} .tv-home-overview .tv-strip-note[hidden]{display:none;} .tv-home-overview .tv-strip-meter{display:block;margin:7px 0 3px;} .tv-home-overview .tv-strip-meter:empty{display:none;} .tv-home-overview .tv-progress{height:4px;} @media (max-width:1023px){ /* Below desktop the three creators stack, each keeping its three Stories in a row, so thumbnails stay large instead of shrinking into columns. */ .tv-home-groups{grid-template-columns:minmax(0,1fr);gap:24px;} .tv-home-group{max-width:600px;} .tv-home-overview{grid-template-columns:repeat(2,minmax(0,1fr));} .tv-home-overview li:nth-child(3){border-left:0;} .tv-home-overview li:nth-child(n+3){border-top:1px solid var(--border-card);} /* Without the Vault figure (storage not set up) the plan takes the whole second row rather than leaving a gap. */ .tv-home-overview:has(#vaultMetric[hidden]) #planFigure{grid-column:1/-1;border-left:0;} } @media (max-width:767px){ .tv-page--dash .tv-home-head{margin:0 0 16px;} .tv-home-status{font-size:13.5px;} .tv-page--dash .tv-home-tool{margin:0 0 32px;} /* Phones: the box holds the icon, the text and Paste; the action takes its own full-width row under it, so nothing is squeezed. */ .tv-page--dash .tv-home-tool .tv-universal-field{grid-template-rows:56px 48px;gap:8px 2px;min-height:0;padding:0;border:0;box-shadow:none;} .tv-page--dash .tv-home-tool .tv-universal-field::before{height:56px;border-color:var(--border-field);border-radius:var(--radius-field);transition:border-color var(--duration-base) ease,box-shadow var(--duration-base) ease;} .tv-page--dash .tv-home-tool .tv-universal-field:focus-within{box-shadow:none;} .tv-page--dash .tv-home-tool .tv-universal-field:focus-within::before{border-color:var(--accent-line);box-shadow:var(--focus);} .tv-page--dash .tv-home-tool .tv-universal-field:has(input[aria-invalid="true"]){box-shadow:none;} .tv-page--dash .tv-home-tool .tv-universal-field:has(input[aria-invalid="true"])::before{border-color:rgba(248,113,113,.55);} .tv-page--dash .tv-home-tool .tv-universal-field>.tv-field-icon{height:56px;margin-left:10px;} .tv-page--dash .tv-home-tool .tv-universal-field>input{height:56px;font-size:16px;padding:0 4px;} .tv-page--dash .tv-home-tool .tv-universal-paste{height:44px;margin-right:6px;} .tv-page--dash .tv-home-tool .tv-universal-field>.tv-universal-submit{min-width:0;height:48px;min-height:48px;margin-left:0;border-radius:var(--radius-control);} .tv-page--dash .tv-home-tool .tv-universal-support{display:flex;} .tv-home-notice{align-items:flex-start;} /* Actions under the text, starting where the text starts. */ .tv-home-notice .tv-notice-actions{padding-left:40px;} .tv-page--dash .tv-home-section{margin:0 0 32px;} .tv-page--dash .tv-home-section>.tv-section-head{align-items:flex-start;} .tv-page--dash .tv-home-section>.tv-section-head h2{font-size:17px;} .tv-home-groups{gap:22px;} .tv-home-group-tiles{gap:6px;} .tv-page--dash .lib-card--story>.lib-tile{border-radius:12px;} .tv-page--dash .lib-card--story>.lib-meta{padding:0 8px 8px;} .tv-page--dash .lib-card--story>.lib-meta>.lib-meta-row{flex-direction:row;} .tv-home-overview a{padding:14px 14px 15px;} .tv-home-fig-label{margin:0 0 4px;font-size:12.5px;} .tv-home-overview .tv-strip-value{font-size:17px;line-height:22px;} #planFigure .tv-strip-value{font-size:16px;} .tv-home-overview .tv-strip-note{font-size:12px;white-space:normal;} .tv-home-start-list{grid-template-columns:minmax(0,1fr);} .tv-home-start-list li+li{border-left:0;border-top:1px solid var(--border-card);} .tv-home-start-list li{padding:14px 18px;} .tv-home-start-list--actions li{padding:0;} .tv-home-start-action{padding:14px 18px;} .tv-home-start-list--actions li .tv-home-start-action{border-radius:0;} .tv-home-start-list--actions li:last-child .tv-home-start-action{border-bottom-left-radius:calc(var(--radius-card) - 1px);border-bottom-right-radius:calc(var(--radius-card) - 1px);} .tv-home-monitor-row{padding:10px 14px;} .tv-home-monitor-who .tv-monitor-status{flex-direction:column;align-items:flex-start;gap:1px;} .tv-home-start-head{padding:18px 18px 0;} .tv-home-error{flex-wrap:wrap;} } @media (max-width:359px){ .tv-page--dash .tv-home-tool .tv-universal-paste{gap:0;padding:0 11px;font-size:0;} } .tv-page--dash :is(.tv-home-section,.tv-home-start,.tv-feedback){padding-top:0;padding-bottom:0;border-top:0;} .tv-page--dash .tv-feedback{padding:18px 20px;border-top:1px solid var(--border-card);} .tv-page--dash .tv-home-section>.tv-section-head{align-items:center;} @media (max-width:767px){ .tv-page--dash .tv-home-section>.tv-section-head{flex-wrap:nowrap;align-items:flex-start;} .tv-page--dash .tv-home-section>.tv-section-head h2{flex:1 1 auto;min-width:0;} .tv-page--dash .tv-home-section>.tv-section-head .tv-home-link{min-height:24px;} } /* 15 ─ Search (/search) ───────────────────────────────────────────────────── The creator entry point (search.html, creator-route.js, search-page.js). Every rule is scoped to Search (.tv-page--search, .tv-search, .tv-search-*), so Home, the signed-in Home and the tool pages, which share the universal input and the creator tabs, are untouched. */ .tv-page--search .tv-page-head{margin-bottom:20px;} /* The Search workspace, on the app width: one column -- the lookup toolbar across the page, recent searches as a row of chips under it when there are any, then (before a lookup) what Search is for. Nothing is reserved beside the field for a history that may not exist. */ .tv-page--search{container:search / inline-size;} .tv-search{display:flex;flex-direction:column;width:100%;min-width:0;} /* The field is Home's (section 13 styles it for Home, the SEO tool pages, the guide and Search together): search icon, field, Paste and the white Find Creator button on one row; on phones the button goes full width under the field. Search only adds its own pieces below: the clear button and the "/" hint. */ .tv-search .tv-universal{max-width:none;margin:0;gap:0;} /* Clear (X) while the field has text; the "/" key hint while it is empty and unfocused, on desktop only. */ .tv-search-clear{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-pill);background:none;color:var(--text-3);cursor:pointer;} .tv-search-clear:hover{background:var(--bg-hover);color:var(--text);} .tv-search-clear:focus-visible{outline:2px solid var(--accent);outline-offset:0;} .tv-search-clear .app-icon{width:16px;height:16px;} .tv-search .tv-universal-field:has(>input:placeholder-shown)>.tv-search-clear{display:none;} .tv-search-key{display:none;flex:none;place-items:center;min-width:22px;height:22px;margin:0 6px 0 0;padding:0 6px;border:1px solid var(--border-strong);border-radius:6px;color:var(--text-3);font:500 12px/1 var(--font);} @media (min-width:768px) and (pointer:fine){ .tv-search .tv-universal-field:has(>input:placeholder-shown):not(:focus-within)>.tv-search-key{display:grid;} } @media (max-width:767px){ /* Home's phone grid, with a slot for the clear button between the field and Paste. It collapses while the field is empty (clear is hidden). */ .tv-search .tv-universal-field{grid-template-columns:44px minmax(0,1fr) auto auto;} .tv-search .tv-search-clear{grid-column:3;grid-row:1;z-index:1;width:40px;height:44px;border-radius:10px;} .tv-search .tv-universal-paste{grid-column:4;} } /* One muted line under the field: how to search, or what the field recognised, or a note. */ .tv-search .tv-universal-support{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0 2px;color:var(--text-3);font-size:12.5px;line-height:18px;} .tv-search .tv-universal-support:not(:has(>:not([hidden]))),.tv-search .tv-universal-support[hidden]{display:none;} .tv-search .tv-universal-detect{color:var(--text-2);} .tv-search .tv-universal-results{max-width:none;margin:0;} .tv-search .tv-universal-results>:not(:empty){margin-top:16px;} .tv-search .tv-universal-results .tv-results{max-width:none;} .tv-search .tv-universal-loading{min-height:56px;border-color:var(--border-card);border-radius:var(--radius-md);background:var(--bg-surface-1);} /* Saved creator usernames: one wrapping row below the field. Each username opens the creator; history-management controls stay out of this view. */ .tv-search-recent{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0;} .tv-search-recent[hidden]{display:none;} .tv-search-recent-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;margin:0;padding:0;list-style:none;} .tv-search-recent-item{min-width:0;max-width:100%;} .tv-search-recent-open{display:block;min-width:0;max-width:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:13.5px;font-weight:500;line-height:20px;cursor:pointer;} .tv-search-recent-open:hover{color:var(--accent);} .tv-search-recent-name{min-width:0;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tv-search-recent :is(button):focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* Before a lookup: "Explore creators", four compact informational cards on the page width (not links: nothing to click). Four across when there is room, two on tablets and narrow app columns, one under 520px. Gone while a lookup is under way. */ .tv-search .tv-universal-results.is-connected~.tv-search-start{display:none;} .tv-search-start{margin:32px 0 0;} .tv-search-start[hidden]{display:none;} .tv-search-start>h2{margin:0 0 12px;font-size:15px;line-height:22px;font-weight:600;} .tv-search-explore{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;} .tv-search-explore>li{display:flex;flex-direction:column;min-width:0;padding:20px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface-1);} .tv-search-explore-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0 0 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent);} .tv-search-explore-icon .app-icon{width:18px;height:18px;} .tv-search-explore h3{margin:0;font-size:14.5px;line-height:20px;font-weight:600;letter-spacing:-.005em;} .tv-search-explore p{margin:4px 0 0;color:var(--text-2);font-size:13px;line-height:19px;text-wrap:pretty;} @container search (max-width:899px){ .tv-search-explore{grid-template-columns:repeat(2,minmax(0,1fr));} } @container search (max-width:519px){ /* Phones: one column, the icon beside the copy, so four cards stay short. */ .tv-search-explore{grid-template-columns:minmax(0,1fr);gap:8px;} .tv-search-explore>li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px;} .tv-search-explore-icon{grid-row:1 / span 2;margin:0;} .tv-search-explore p{margin-top:2px;} } @media (max-width:599px){ .tv-page--search .tv-page-head{margin-bottom:16px;} .tv-search-recent{margin-top:16px;} .tv-search-start{margin-top:28px;} } @media (max-width:359px){ /* The narrowest phones: the clear button narrows while it shows. */ .tv-search .tv-search-clear{width:34px;} } @media (max-width:767px){ .tv-creator-content-tabs{gap:16px;} } @media (max-width:380px){ .tv-creator-profile.is-creator .tv-avatar--lg{width:44px;height:44px;} .tv-creator-profile.is-creator .tv-page-head-main{gap:10px;} .tv-creator-profile.is-creator :is(h1,h2){font-size:18px;line-height:24px;} .tv-creator-profile.is-creator .story-figures{width:calc(100% + 150px);margin-left:-54px;} .tv-creator-profile.is-creator:has(.tv-btn--primary) .story-figures{width:calc(100% + 54px);} } /* Home as a workspace. Wide: the field (with the trial under it) and the work below it on the left, about two thirds; on the right the account at a glance once a creator is tracked (before that, one column). The source order is field, account, work, so narrower it is one column in that order and focus follows what is on screen. */ .tv-page--dash{container:home / inline-size;} .tv-home-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto 1fr;gap:0 40px;align-items:start;} .tv-home-lead,.tv-home-primary,.tv-home-side{min-width:0;} .tv-home-lead{grid-column:1;grid-row:1;} .tv-home-primary{grid-column:1;grid-row:2;} .tv-home-side{grid-column:2;grid-row:1 / span 2;align-self:start;} /* Before the first creator there is no side column: one column. */ .tv-home-layout:not(:has(>.tv-home-side:not([hidden]))){grid-template-columns:minmax(0,1fr);} .tv-page--dash #accountSection{margin:0;} .tv-page--dash #accountSection>.tv-section-head h2{font-size:15px;line-height:22px;} /* Figures as a gap-drawn grid: any number of visible cells, no broken borders where a figure is hidden. Two across in the side column. */ #dashStats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-card);} #dashStats li{border:0;background:var(--bg-surface-1);} #dashStats li:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])){grid-column:1 / -1;} #dashStats a{padding:16px 18px;} #dashStats .tv-strip-value{font-size:18px;line-height:24px;white-space:normal;overflow:visible;text-overflow:clip;} #dashStats .is-warning .tv-strip-value{color:var(--warn);} /* The trial (trial.js) sits under the field on Home, before the work. */ .tv-page--dash .tv-home-tool{margin-bottom:24px;} .tv-page--dash .tv-trial-slot{margin:0 0 40px;} .tv-page--dash .tv-trial-slot:empty{display:none;} .tv-page--dash .tv-home-tool:has(+ .tv-trial-slot:empty){margin-bottom:40px;} /* One promotion at a time: while the trial banner shows, the Monitoring note leaves out its plans hint (dashboard.js). */ .tv-page--dash:has(#trialSlot > *) .tv-home-plan-hint{display:none;} @container home (max-width:980px){ .tv-home-layout{display:flex;flex-direction:column;align-items:stretch;} .tv-home-side{align-self:stretch;} #dashStats{grid-template-columns:repeat(4,minmax(0,1fr));} #dashStats li:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])){grid-column:auto;} .tv-page--dash #accountSection{margin:0 0 32px;} } @container home (max-width:640px){ #dashStats{grid-template-columns:repeat(2,minmax(0,1fr));} #dashStats li:nth-last-child(1 of :not([hidden])):nth-child(odd of :not([hidden])){grid-column:1 / -1;} #dashStats a{padding:14px;} } /* ── Downloader, signed in ─────────────────────────────────────────────── The public Downloader (downloader.html) is an SEO page: a hero band, promotion, FAQ and related tools. Signed in -- body.is-signed-in, set by shell.js only after /api/account/me confirms the session -- the same page and the same tool become an app workspace like Home and Search: a page heading, the field and its results, and what it accepts beside them. Signed out nothing here applies, and the HTML is the same either way. */ .tv-dl-aside,.tv-seo-guest{display:none;} body:not(.is-signed-in) .tv-seo-guest{display:inline;} html:has(body.is-signed-in .tv-page--downloader){background:var(--bg);} body.is-signed-in .tv-page--downloader{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:40px;align-items:start;max-width:var(--page-app-max);margin:0 auto;padding:32px var(--gutter) 72px;} body.is-signed-in .tv-page--downloader>section:not(.tv-hero){display:none;} body.is-signed-in .tv-page--downloader>.tv-seo-hero{--hero-gap-tool:24px;grid-column:1;align-items:stretch;padding:0;border:0;background:none;text-align:left;} body.is-signed-in .tv-page--downloader>.tv-seo-hero>*{max-width:none;} body.is-signed-in .tv-page--downloader>.tv-seo-hero h1{max-width:none;margin:0;font-size:32px;line-height:40px;letter-spacing:-.03em;text-wrap:wrap;} body.is-signed-in .tv-page--downloader>.tv-seo-hero>p{max-width:none;margin:4px 0 0;font-size:14px;line-height:21px;} body.is-signed-in .tv-page--downloader .tv-seo-hero .tv-universal{margin:24px 0 0;} body.is-signed-in .tv-page--downloader .tv-universal-support{justify-content:flex-start;margin:10px 2px 0;} body.is-signed-in .tv-page--downloader .tv-seo-hero>.tv-benefits{display:none;} body.is-signed-in .tv-page--downloader .tv-seo-hero>.tv-universal-results{max-width:none;} body.is-signed-in .tv-dl-aside{display:flex;flex-direction:column;gap:12px;grid-column:2;grid-row:1;margin-top:64px;padding:18px 20px;border:1px solid var(--border-card);border-radius:16px;background:var(--bg-surface-1);} .tv-dl-aside h2{margin:0;font-size:15px;line-height:22px;font-weight:600;} .tv-dl-aside ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;} .tv-dl-aside li{display:flex;align-items:flex-start;gap:10px;color:var(--text-2);font-size:13px;line-height:19px;} .tv-dl-aside li[data-icon]:not([data-icon-hydrated="true"])::before{content:"";width:16px;height:16px;flex:none;} .tv-dl-aside li .app-icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--text-3);} .tv-dl-aside li strong{display:block;color:var(--text);font-size:13.5px;font-weight:600;} .tv-dl-aside p{margin:0;padding-top:12px;border-top:1px solid var(--border-card);color:var(--text-3);font-size:12.5px;line-height:18px;} .tv-dl-aside p a{color:var(--text-2);} @media (max-width:1180px){ body.is-signed-in .tv-page--downloader{grid-template-columns:minmax(0,1fr);} body.is-signed-in .tv-dl-aside{grid-column:1;grid-row:auto;margin-top:28px;} } @media (max-width:767px){ body.is-signed-in .tv-page--downloader{padding:20px var(--gutter) 40px;} body.is-signed-in .tv-page--downloader>.tv-seo-hero h1{font-size:26px;line-height:32px;} } /* ── Phones: the redesigned pages, tightened ───────────────────────────── On a phone every line costs a scroll, so what repeats the page heading, the status line or a figure beside it steps aside, and rows that would wrap into stacks scroll sideways instead. Desktop is unchanged. */ @media (max-width:599px){ /* Search: saved usernames stay in one compact, horizontally scrollable row. */ .tv-search-recent{display:block;margin-top:18px;} .tv-search-recent-list{display:flex;flex-wrap:nowrap;gap:12px;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;} .tv-search-recent-list::-webkit-scrollbar{display:none;} .tv-search-recent-item{flex:none;} .tv-search-start{gap:6px;margin-top:40px;} .tv-search-start>.tv-icon-tile{--tile:40px;margin-bottom:4px;} .tv-search-start h2{font-size:16px;line-height:22px;} .tv-search-start p{font-size:13.5px;line-height:20px;} } @container home (max-width:640px){ /* Home: the field's hint, the figures' second lines that the status line already says, and the Monitoring footnote step aside; the trial banner keeps its offer, action and terms without the four-item list. */ .tv-home-tool .tv-universal-support-default{display:none;} #creatorsMetric .tv-strip-note,#storiesMetric .tv-strip-note{display:none;} #dashStats a{padding:12px 14px;} #dashStats .tv-strip-value{font-size:17px;line-height:22px;} .tv-page--dash #accountSection{margin-bottom:28px;} #monitoringNote{display:none;} .tv-page--dash .tv-trial-slot .tv-promo-features{display:none;} .tv-page--dash .tv-trial-slot{margin-bottom:32px;} .tv-page--dash .tv-home-tool,.tv-page--dash .tv-home-tool:has(+ .tv-trial-slot:empty){margin-bottom:20px;} }