.tdx-home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md, 16px); margin: 26px 0 12px; padding: 0 10px; } .tdx-home-section-heading h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--color-text, #fdfdfd); font-family: var(--font-brand, inherit); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.55rem); font-weight: 500; } .tdx-home-section-heading h2 i, .tdx-home-section-heading h2 svg { color: #ff5e62; } .tdx-home-section-heading p { margin: 0; color: var(--color-text-dim, #999); font-size: var(--fs-sm, 0.813rem); } .tdx-studio-tiles-shell { width: 100%; box-sizing: border-box; } .tdx-studio-tiles .continue-watching-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md, 16px); } .tdx-studio-tiles { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; } .tdx-studio-tiles-actions { display: flex; align-items: center; gap: 12px; } .tdx-studio-tiles-all { flex: 0 0 auto; color: var(--color-text-dim, #999); font-size: var(--fs-sm, 0.813rem); font-weight: 600; text-decoration: none; white-space: nowrap; } .tdx-studio-tiles-all:hover, .tdx-studio-tiles-all:focus-visible { color: var(--color-accent, #e85d04); } .tdx-studio-tiles-rail { display: flex; gap: var(--space-md, 16px); width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0 8px; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab; } .tdx-studio-tiles-rail::-webkit-scrollbar { display: none; } .tdx-studio-tiles-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; } .tdx-studio-tiles-rail.is-dragging .tdx-studio-tile { pointer-events: none; } .tdx-studio-tiles-rail img, .tdx-studio-tiles-rail a { -webkit-user-drag: none; user-select: none; } .tdx-studio-tile { display: flex; align-items: center; flex: 0 0 clamp(210px, 22vw, 270px); gap: 12px; min-width: 0; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--color-border, #444); border-radius: var(--radius-md, 8px); background: var(--color-surface-alt, #212121); color: inherit; text-decoration: none !important; scroll-snap-align: start; transition: border-color var(--transition-fast, 150ms ease), background var(--transition-fast, 150ms ease); } .tdx-studio-tile:hover, .tdx-studio-tile:focus-visible { border-color: var(--color-accent, #e85d04); background: var(--color-surface, #303030); } .tdx-studio-tile-img { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #111; border: 1px solid rgba(255, 255, 255, 0.08); } .tdx-studio-tile-img--empty { display: block; } .tdx-studio-tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tdx-studio-tile-name { color: var(--color-text, #fdfdfd); font-size: var(--fs-md, 1rem); font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tdx-studio-tile:hover .tdx-studio-tile-name { color: var(--color-accent, #e85d04); } .tdx-studio-tile-count { color: var(--color-text-dim, #999); font-size: var(--fs-xs, 0.75rem); font-variant-numeric: tabular-nums; } @media (max-width: 600px) { .continue-watching.tdx-cat-tiles, .continue-watching.tdx-studio-tiles { padding-right: 0; padding-left: 0; } .tdx-cat-tiles-header, .tdx-studio-tiles > .continue-watching-header { padding-right: 8px; padding-left: 8px; } .tdx-cat-tiles-rail, .tdx-studio-tiles-rail { touch-action: pan-x pan-y; } .tdx-home-section-heading { align-items: flex-start; flex-direction: column; margin-top: 20px; } .tdx-home-section-heading p { line-height: 1.45; } .tdx-studio-tiles-rail { gap: var(--space-sm, 8px); } .tdx-studio-tile { flex-basis: 205px; } } @media (prefers-reduced-motion: reduce) { .tdx-studio-tiles-rail { scroll-behavior: auto; } }